Question

以下JSFiddle显示了我的问题： http://jsfiddle.net/WREV3/

它看起来很干净： enter image description here

我的问题：如何让列表项之间的边界跨越子弹？

我想要彩色子弹，因此使用:before技巧。有了这个我不得不添加一些负面margin-left，当然子弹落在“框架”之外。但是我如何得到这样的边框：

  * Item here spanning
    multiple lines   >
-----------------------
  * Another Item     >
-----------------------
  * Wow. More!       >
-----------------------

注意第一项第二行的缩进：与第一行相同的缩进。

HTML标记：

<ul>
    <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
        <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
    </li>
    <li class="new">
    <span>Item 2 asd asd asdas
        <div>&raquo;</div>
    </span>
    <div>2014-03-20, 11:20:03</div>
    </li>
    <li>
    <span>
    Item 3 asd asd asdas sduiosmn diomsio d
        <div>&raquo;</div></span>
    <div>2014-03-19, 04:01:35</div>
    </li>
    <li>
    <span>
    Item 4 asd asdasd
        <div>&raquo;</div>
    </span>
    <div>2014-03-15, 09:20:05</div>
    </li>
</ul>

CSS：

ul {
    list-style: none;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
}
ul li.new:before {
    color: #f00;
    content: "•";
    padding-right: 0;
    position: relative;
    left: -3px;
    margin-left: -12px;
}
ul li {
    padding: 5px 9px 5px 0;
    border-bottom: 1px solid gray;
}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Answer 1

对absolute使用position :before，对margin-left使用padding-left，并为li添加{{1}}，以便为生成的项目符号节省空间。 http://jsfiddle.net/WREV3/8/

Answer 2

如果您愿意，可以使用list-style-position:inside移动标准项目符号，但您可能需要查看其他一些CSS以影响其他元素

JSfiddle

<强> CSS

ul {
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
    list-style-position: inside; /* here :not 'list-style:none` has been removed */ 

}

ul li {
    border-bottom: 1px solid gray;


}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Answer 3

你可以试试这个：

HTML

<ul>
  <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
      <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
  </li>
  <hr />
  <li class="new">
    <span>Item 2 asd asd asdas
      <div>&raquo;</div>
    </span>
    <div>2014-03-20, 11:20:03</div>
  </li>
  <hr />
  <li>
    <span>
      Item 3 asd asd asdas sduiosmn diomsio d
    <div>&raquo;</div></span>
    <div>2014-03-19, 04:01:35</div>
  </li>
  <hr />
  <li>
    <span>
      Item 4 asd asdasd
      <div>&raquo;</div>
    </span>
    <div>2014-03-15, 09:20:05</div>
  </li>
  <hr />
</ul>

CSS

ul {
  list-style: none;
  font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  font-size: 13px;
  width: 200px;
}
ul li.new:before {
  color: #f00;
  content: "•";
  padding-right: 0;
  position: relative;
  left: -3px;
  margin-left: -12px;
}
ul li {
  padding: 5px 9px 5px 0;
}
ul li span {
  font-weight: bold;
}
ul li span div {
  float: right;
  font-weight: normal;
}
  ul li span + div {
  padding-top: 2px;
  font-size: 9px;
}
hr{
  margin-left:-1.5em;
  border:none;
  height:1px;
  background:#000;
}

Answer 4

你有。工作和有效。

http://jsfiddle.net/2emwP/

HTML：

<ul>
    <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
        <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
    </li>
    <li class="border"></li>

</ul>

CSS：

ul {
    list-style: none;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
}
ul li.new:before {
    color: #f00;
    content: "•";
    padding-right: 0;
    position: relative;
    left: -3px;
    margin-left: -12px;
}
ul li {
    padding: 5px 9px 5px 0;
    border: 0;

}
ul li.border{
    border-bottom: 1px solid gray;
    padding: 0;
    margin: 0;
    width: 212px;
    margin-left: -12px;
}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Answer 5

您可以从

更改<li> css定义

ul li {
    padding: 5px 9px 5px 0;
    border-bottom: 1px solid gray;
}

到

ul li {
    padding: 5px 9px 5px 0;
    position: relative;
}

ul li:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    border: 1px solid gray;
    width: 220px;
    margin-left: -20px;
}

，无需更改HTML代码的结构。

列出跨越整个宽度的边框的项目

5 个答案: