向每个< li>添加水平线规则 [英] Append horizontal rule to each <li>

问题描述

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

 < ul class =mylist> 
< li> 
 moooo！ 
< hr width =40％> 
< / li> 
< li> 
 maaaaa！ 
< hr width =40％> 
< / li> 
 ... 
< / ul> 
  

加入< hr> 给每个< li> ，所以我想用css来折射这个。我无法使用：

  .mylist> li：在{
内容：< hr>之后
} 
  

作为内容可以转义字符。

我也做不是想使用jQuery：

  $（'。 mylist'）。find（'li'）。append（'< hr width =40％>'）; 
  

所以问题是，我怎么能追加< hr width = 40％> 到每个 < li> 使用 css3

解决方案

jQuery解决方案

刚才意识到你想在关闭它之前将 hr 元素嵌套在 li 中，是的，这是完全有效的，所以只需使用 append（），并注意，您不能使用CSS来完成此操作，因为您无法使用CSS修改DOM，所以需要使用jQuery或JS

  jQuery（ul li）。append（< hr />）; 
  

Demo

---

CSS解决方案

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

使用 hr 元素作为直接子元素< ul 元素不是有效的标记，您可以使用 border-bottom 对于每个 li ，它们的行为与 hr 相同，如果你想明确地做到这一点，比如控制分隔符的宽度而不改变宽度的 li 比您可以像这样做

  ul li：在{
 content：after 之后 ; 
 display：block; 
 height：1px; 
宽度：40％; 
 margin：10px; 
背景：＃f00; 
 
 $ / code> 

在这里，我只是创建一个虚拟块 level元素，它实际上并不存在于DOM中，但它只会做你需要的东西。你可以设计元素，就像你设计正常的 div 一样。您也可以使用 border ，但为了保持细线水平居中，我分配了 height：1px; 并且比使用 margin 来腾出空间。

For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:

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

It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:

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

as content would escape the characters.

I also do not want to use jQuery:

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

So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?

解决方案

jQuery Solution

Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS

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

Demo

---

CSS Solution

If you don't need an extra element, or you don't want a jQuery solution(As you want)

Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this

Demo

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

Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.

这篇关于向每个&lt; li&gt;添加水平线规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！