Пунктирная граница слева направо (между двумя элементами)

Я понятия не имею, как это сделать.Пунктирная граница слева направо (между двумя элементами)

То, что я хочу сделать, это печатать точки между Uncategorized и 82,359, или, по крайней мере, иллюзию, я предполагаю, что я должен сделать что-то с пунктирной границей

<ul class="list"> 
    <li> 
    <a href="#"> 
     <span class="count">82,359</span> 
     Uncategorized 
    </a> 
    </li> 
</ul>

CSS

.list a { 
display: block; 
padding: 6px 10px; 
} 

.list .count { 
font-weight: normal; 
float: right; 
color: #6b7a8c; 
}

Что я хочу:

what i want То, что я пробовал, и единственный способ, которым я могу думать, это <div style="border-bottom: 1px dotted #CCC;"></div> betwe en .count и Uncategorized, но которые добавляют границу сверху двух

источник

2015-07-17 Bolter lotorox

Основанный на примере, используемом здесь: Dot Leaders, на который ссылается Black Hat Samurai, небольшое изменение к разметке и CSS из ссылки помогли ему.

Добавленные комментарии, чтобы объяснить, как работает код.

ul.list { 
 
    max-width: 220px; /* Set the width for the whole list */ 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ul.list li:before { 
 
    float: left; /* Let the before pseudo element start from the leftmost position of each list item */ 
 
    width: 0; 
 
    white-space: nowrap; 
 
    content: "....................................................."; 
 
    color: #ccc; 
 
    font-weight: bold; 
 
} 
 
ul.list span:first-child { 
 
    background: white; 
 
    padding-right: 0.2em; 
 
} 
 
ul.list span + span { 
 
    float: right; /* Align the count to the rightmost position of the list */ 
 
    background: white; 
 
    padding-left: 0.2em; 
 
}

<ul class="list"> 
 
    <li> 
 
    <a href="#"> 
 

 
     <span class="title">Uncategorized</span> 
 
     <span class="count">82,359</span> 
 

 
    </a> 
 
    </li> 
 
</ul>

источник

2015-07-17 17:39:01

Конечно, вам нужно будет отредактировать значения на основе соответствующей смены родителя. Это было основано на вашем коде. Также, пожалуйста, отредактируйте ругательное слово в своем комментарии. –

Я получил его работу, спасибо кучу. Я не могу изменить свой комментарий –

То, что вы ищете, называется Dot Leaders. Вот статья, которая описывает, как добиться эффекта желания:

http://www.w3.org/Style/Examples/007/leaders.en.html

источник

2015-07-17 17:30:01 BlackHatSamurai

ссылку только ответ не хороший ответ. Отправьте несколько примеров из источника и т. Д. – lmgonzalves

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     .list a { 
      display: block; 
      border-bottom: dotted 1px; 
      height: 13px; 
     } 

     .list .title { 
      padding-right: 5px; 
      background-color: white; 
      font-weight: normal; 
      float: left; 
      color: #6b7a8c; 
     } 
     .list .count { 
      background-color: white; 
      padding-left: 5px; 
      font-weight: normal; 
      float: right; 
      color: #6b7a8c; 
     } 
    </style> 
</head> 
<body> 
    <ul class="list"> 
     <a href="#"> 
      <span class="title">Uncategorized</span> 
      <span class="count">82,359</span> 
     </a> 
    </ul> 
</body> 
</html>

Я использовал грязный хак. Прежде всего, тег теперь имеет высоту 13. Затем я добавил фоновый цвет: белый (или любой другой), чтобы удалить точки под текстом. Пожалуйста, будьте осторожны при использовании этого решения!

источник

2015-07-17 17:37:09

Попробуйте это ..

HTML

<ul class="list"> 
    <li> 
    <a href="#"> 
     <span>Uncategorized</span> 
     <span class="count">82,359</span> 
    </a> 
    </li> 
</ul>

CSS

ul{ 
    list-style-type: none; 
    font-family: arial; 
    font-size: 17px; 
} 
a{ 
    text-decoration: none; 
    color: #000; 
} 
ul.list li{ 
} 
li span + span:before{ 
    content: ".................................."; 
    white-space: nowrap; 
}

Проверить эту Fiddle

источник

2015-07-17 17:45:44 Malik

Я бы с чем-то вроде этого

.list { 
 
    min-width:15em; 
 
} 
 
.first { 
 
    float:left; 
 
    margin-right:0.5em; 
 
    color:#2B91AF 
 
} 
 
.price { 
 
    float:right; 
 
    margin-left:0.5em; 
 
    width:4em; 
 
    text-align: right; 
 
} 
 
.list:after { 
 
    content:''; 
 
    border-bottom:dotted 2px tomato; 
 
    display:block; 
 
    overflow:hidden; 
 
    height:0.8em; 
 
}

<p class="list"> 
 
    <i class='first'>Co-Pay:</i> 
 
    <i class="price">$150.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Pay:</i> 
 
    <i class="price"> $5.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Co-Pay: item</i> 
 
    <i class="price"> $15.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Co-Pay: great deal</i> 
 
    <i class="price"> $1.00</i> 
 
</p>

источник

2015-07-17 18:37:38

Пунктирная граница слева направо (между двумя элементами)

ответ

Смежные вопросы