Question

对于我的<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>？

Answer 1

jQuery解决方案

刚才意识到你希望在关闭之前将hr元素嵌套在li内，是的，它是完全有效的，所以只需使用append()，并注意，你不能这样做只使用CSS，因为你无法使用CSS修改DOM，你需要使用jQuery或JS

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

Demo

CSS解决方案

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

使用hr元素作为ul元素的直接子元素不是有效标记，相反，您可以为每个border-bottom使用li，其行为与如果你想要一个明确的方法，hr会这样做，比如控制分隔符的width而不更改width的{{1}}比你可以这样做此

Demo

li

在这里，我只是创建一个虚拟ul li:after { content: ""; display: block; height: 1px; width: 40%; margin: 10px; background: #f00; }级别元素，它实际上并不存在于DOM中，但它只会执行您需要的操作。您可以设计元素，就像设置普通block样式一样。您也可以对此使用div，但要保持细线水平居中，我已经指定了border，而不是使用height: 1px;来展开。

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

Answer 3

您可以这样使用：

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

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

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

Answer 4

内容中的标签不被允许，即使它会产生误导（css { content: "text"}, How do i add tags?）

如果您认为在HTML中添加<hr>错误，则添加css（如果可能）或js是错误的。恕我直言第一你应该尝试使用<li＆gt;的边框如果结果不符合预期，请添加<hr>

Answer 5

插入每Class

创建一个bottom-border:的{{1}}

<li>

Answer 6

尝试以下CSS：

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

将水平规则附加到每个<li> </li>

6 个答案: