将水平线添加到每个 <li>答案

【问题标题】：Append horizontal rule to each <li>将水平线添加到每个 <li>
【发布时间】：2013-10-05 12:02:55
【问题描述】：

对于我的<ul> 列表，我想在列表的每个元素之后添加一个<hr>。结果应该呈现如下：

<ul class="mylist">
    <li>
        moooo!
        <hr width="40%">
    </li>
    <li>
        maaaaa!
        <hr width="40%">
    </li>
    ...
</ul>

将<hr> 添加到每个<li> 是不好的风格，所以我想只使用css 来折射它。我不能使用：

.mylist > li: after{
    content: "<hr>"
}

因为内容会转义字符。

我也确实不想用jQuery：

$('.mylist').find('li').append('<hr width="40%">');

所以问题是，我如何使用 css3 将 <hr width="40%"> 附加到某个列表的每个 <li> ？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

jQuery 解决方案

刚刚意识到您想在关闭之前将hr 元素嵌套在li 中，是的，它完全有效，所以只需使用append()，请注意，您不能这样做 仅使用 CSS，因为不能使用 CSS 修改 DOM，所以需要使用 jQuery 或 JS

jQuery("ul li").append("<hr />");

Demo

CSS 解决方案

如果你不需要额外的元素，或者你不想要 jQuery 解决方案（随你所愿）

使用hr 元素作为ul 元素的直接子元素不是有效标记，相反，您可以为每个li 使用border-bottom，其行为与hr 相同，但如果您想要一种明确的方式来做到这一点，比如控制分隔符的width而不改变li的width而不是你可以这样做

Demo

ul li:after {
    content: "";
    display: block;
    height: 1px;
    width: 40%;
    margin: 10px;
    background: #f00;
}

在这里，我只是创建了一个虚拟的block 级别元素，它实际上并不存在于 DOM 中，但它只会做你需要的事情。你可以只设计元素，就像你设计一个普通的div一样。您也可以在此使用border，但为了保持细线水平居中，我分配了height: 1px;，而不是使用margin 来增加空间。

【讨论】：

【解决方案2】：

我认为最好使用 CSS。例如，您可以停止使用<hr> 标签，而是执行以下操作：

<ul class="mylist">
    <li>
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

然后使用 CSS：

.mylist li { border-bottom: 1px solid black; }

还有其他选项，例如，如果您只想为某些列表项显示水平线，您可以给它们一个类并仅为该类添加一个 CSS 规则。像这样：

<ul class="mylist">
    <li class="hr">
        moooo!
    </li>
    <li>
        maaaaa!
    </li>
    ...
</ul>

和 CSS：

.mylist li.hr { border-bottom: 1px solid black; }

【讨论】：

【解决方案3】：

你可以这样使用：

<ul>
   <li></li>
</ul>
<hr/>

这很简单。如果您嵌套了ul 和li，那么您使用li 而不是<hr/> 或只是在<hr/> 标记内使用<hr/>。见下文。这纯粹是你的选择。

<ul>
  <li>
    <ul><li></li></ul>
  </li>
  <li style="height:1px;border:solid 1px #666"> </li> // or you can also use 
  <li><hr/></li>
  <li> 
    <ul>
      <li></li>
    </ul>
  </li>
</ul>

【讨论】：

将水平线嵌套在它自己的列表项中会否定使用列表的目的，因为这些不是列表项。例如，想象一下这将如何播放到屏幕阅读器。

【解决方案4】：

内容中的标签是不允许的，即使它会非常误导 (css { content: "text"}, How do i add tags?)

如果您认为在 HTML 中添加 <hr> 是错误的，那么使用 css（如果可能的话）或 js 添加是错误的。恕我直言，首先您应该尝试使用<li> 的边框，如果结果不符合预期，请添加<hr>

【讨论】：

【解决方案5】：

插入一个Class，为每个<li>创建一个bottom-border:

<!--########## STYLE EACH li USING CLASS ##########-->
<style>
  .hr {
     width:40%;
     border-bottom:1px solid rgba(0,0,0,.7);
   }

</style>

<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
    -CONTENT-

</li>
<li class="hr">
    -CONTENT-
</li>
...

【讨论】：

【解决方案6】：

试试这个 CSS：

li:after {
  content: " ";
  display: block;
  height: 2px;
  width: 100%;
}

【讨论】：