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

Posted 2023-02-23

【中文标题】列出具有跨越整个宽度的边框的项目

【英文标题】：List items with borders spanning across the full width

【发布时间】：2014-05-17 00:01:29

【问题描述】：

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

它看起来很干净：

我的问题：如何让列表项之间的边界跨越项目符号？

我想要彩色子弹，因此使用了: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;

【问题讨论】：

请注意，在尝试使用list-style-position: inside 时，您不会看到多行内容的缩进。见小提琴：jsfiddle.net/WREV3/3

可能值得一提的是，divs 等块级元素不应在spans 等内联元素中使用

你完全正确@Paulie_D。这是一个快速的模型——当我使用div 而不是span 时，它直接进入下一行。我不想摆弄display:inline 或其他魔法。

【参考方案1】：

使用absolute position 表示:before，否定margin-left 并将padding-left 添加到li 为生成的子弹节省空间。 http://jsfiddle.net/WREV3/8/

【讨论】：

这很漂亮。没有想过使用绝对定位。

【参考方案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;

【讨论】：

多行列表项中的缩进已关闭。

正如我所说，需要其他 CSS 但这将解决基本问题。

【参考方案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;

【参考方案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;

【参考方案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 代码的结构。