为每个<li>附加水平规则

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%">');

所以,问题是,我怎么可能追加<hr width="40%">到每个 <li>使用特定列表的CSS3？

Answer 1

jQuery解决方案

刚刚意识到你想在关闭它之前将hr元素嵌入li其中,是的,它完全有效,所以简单地使用append(),注意,你不能只使用CSS 来做这个,因为你不能使用CSS修改DOM,你需要使用jQuery或者JS

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

演示

CSS解决方案

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

使用hrelement作为元素的直接子ul元素不是一个有效的标记,相反,你可以使用a border-bottom表示li相同的行为hr,如果你想要一个明确的方法这样做,比如控制width分隔符而不改变它width的li比你可以做这样的

演示

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

在这里,我只是创建一个虚拟block级别元素,它实际上并不存在于DOM中,但它只会做你需要的东西.您可以像设计法线一样设计元素div.你也可以使用border这个,但要保持细线水平居中,我已经分配,height: 1px;而不是使用margin空间.

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