Добавление Горизонтальных Линий Между Элементами
Я пытаюсь добавить горизонтальную линию между двумя элементами, например LinkedIn: Я не могу заставить линию слева от изображения остановиться на левом подсчете. Я долго гуглил и не могу найти этот конкретный случай. Я уверен, что он где-то там, но я его не нашел. Вот как далеко я зашел:
HTML:
<label>count</label>
<div class="img">
<img src="http://i.stack.imgur.com/qh235.png" />
</div>
и CSS:
div.img {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: right;
}
div.img:before {
position: absolute;
top: 51%;
overflow: hidden;
width: 100%;
margin-left: -100%;
text-align: right;
height: 1px;
content: 'a0';
background-color: blue;
}
http://jsfiddle.net/XWVxk/1465/
Я также думал, что эта структура может быть опцией (div между элементами с div, имеющим границу):
HTML:
<label>count</label>
<div class="hr-line"></div>
<img src="http://i.stack.imgur.com/qh235.png" />
и CSS:
div.hr-line {
position: relative;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
width: 100%;
border-bottom: 1px solid #7A7A7A;
}
http://jsfiddle.net/XWVxk/1464/
но это тоже не работает. Если бы кто-нибудь мог подправить любую попытку, это было бы отличный.
2 ответов
Метод 1: Flexbox
.divided {
display: flex;
align-items: center;
}
.divider {
flex-grow: 1;
border-bottom: 1px solid black;
margin: 5px
}
<p class="divided">
<span>Content 1</span>
<span class="divider"></span>
<span>Content 2</span>
</p>
потому что родитель flexbox, мы можем просто сказать .divider
элемент, чтобы заполнить все доступное пространство, установив flex-grow: 1;
.
Метод 2: сплошной цвет фона
.divided {
background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%);
}
.divided span {
background: white;
padding: 0 5px;
}
.divided span:last-of-type {
float: right;
}
<p class="divided">
<span>Content 1</span>
<span>Content 2</span>
</p>
мы даем .divided
линейный-градиент в качестве фона, чтобы сделать дисплей, который выглядит как линия цвета, который вы хотите, а затем Настройки <span>
, чтобы иметь тот же цвет фона, поэтому они покрывают линию.
вы можете выполнить то же самое несколько разных способов, таких как использование псевдо-элемента в качестве линии, а затем дать <span>
С position
и z-index
.
каковы недостатки этого метода? Это только работает с фоном, который является сплошным цветом. Бросьте изображение, градиент или что-нибудь еще что фон контента будет покрывать, и вы получите такой дисплей:
вот еще один:
.box {
width: 100%;
display:-moz-flex;
display:-webkit-flex;
display:-ms-flex;
display:flex;
}
hr {
/*border: .5px solid #000;*/
margin-left: 10px;
margin-right: 10px;
}
.hr-line {
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
<div class="box">
<label>count</label>
<div class="hr-line"><hr></div>
<img src="http://i.stack.imgur.com/qh235.png">
</div>