Добавление Горизонтальных Линий Между Элементами

Я пытаюсь добавить горизонтальную линию между двумя элементами, например LinkedIn: enter image description here Я не могу заставить линию слева от изображения остановиться на левом подсчете. Я долго гуглил и не могу найти этот конкретный случай. Я уверен, что он где-то там, но я его не нашел. Вот как далеко я зашел:

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/

enter image description here Я также думал, что эта структура может быть опцией (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/

но это тоже не работает. Если бы кто-нибудь мог подправить любую попытку, это было бы отличный.

6
css html

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 method explanation

потому что родитель 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>

background-color method explanation

мы даем .divided линейный-градиент в качестве фона, чтобы сделать дисплей, который выглядит как линия цвета, который вы хотите, а затем Настройки <span>, чтобы иметь тот же цвет фона, поэтому они покрывают линию.

вы можете выполнить то же самое несколько разных способов, таких как использование псевдо-элемента в качестве линии, а затем дать <span>С position и z-index.

каковы недостатки этого метода? Это только работает с фоном, который является сплошным цветом. Бросьте изображение, градиент или что-нибудь еще что фон контента будет покрывать, и вы получите такой дисплей:

comparing the methods

23

вот еще один: 

.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>
2