Question

我不知道怎么做这个。

我想要做的是在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 我尝试过的，我能想到的唯一方法是.count和Uncategorized之间的<div style="border-bottom: 1px dotted #CCC;"></div>，但是在两者之上添加边框

Answer 1

基于此处使用的示例：Black Hat Samurai引用的Dot Leaders，标记的轻微更改和链接中的CSS帮助了它。

添加了注释以解释代码的工作原理。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您正在寻找的是Dot Leaders。这篇文章描述了你如何实现欲望效果：

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

Answer 3

<!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.然后我添加了背景颜色：白色（或其他）以删除文本下的点。请小心使用此解决方案！

Answer 4

试试这个..

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

Answer 5

我选择这样的事情

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

从左到右的虚线边框（两个元素之间）

5 个答案: