html – 将水平规则附加到每个>

对于我的< 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%">');

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

解决方法

jQuery解决方案

只是意识到你希望在关闭它之前将小时元素嵌入到li中，是的，它是完全有效的，所以只需使用append()，并注意，你不能仅使用CSS，因为你不能使用CSS修改DOM，你需要使用jQuery或JS

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

Demo

CSS解决方案

如果你不需要额外的元素，或者你不想要一个jQuery解决方案(如你所愿)

使用hr元素作为一个直接的孩子到ul元素不是一个有效的标记，相反，你可以使用一个边框底部的每个li，将表现为与hr相同的行为，仍然如果你想要一个明确的方式来做，所以控制分隔符的宽度，而不改变li的宽度，可以像这样做

Demo

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

在这里，我只是创建一个虚拟块级元素，这在DOM中并不存在，但它只是做你需要的东西。您可以设计元素，与您正常格式的样式相同。你也可以使用边框，但要保持细线水平居中，我分配了高度：1px;而不是使用保证金来弥补。

原文地址：https://www.jb51.cc/html/233109.html