在每个< li> [英] Add horizontal rule after 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：{
 content：< hr>之后
} 
  

作为内容将转义字符。

我也不要使用jQuery：

  $（'。 mylist'）。find（'li'）。append（'< hr width =40％>'）;所以问题是，如何附加< hr width =
  



<使用 css3 将特定列表中的每个 至

>？

解决方案

jQuery解决方案

刚刚意识到你想在 li 之前嵌入 hr 元素，然后再关闭它，所以只需使用 append（），注意，你不能这样做仅使用CSS，因为你不能使用CSS修改DOM，你需要使用jQuery或JS

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

演示

$

---

b
$ b

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

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

演示

  ul li：{
 content： ; 
 display：block; 
 height：1px; 
 width：40％; 
 margin：10px; 
 background：＃f00; 
} 
  

这里，我只是创建一个虚拟 code> level元素，它实际上不存在于DOM中，但它只是做你需要的东西。你可以设计元素，就像你设置一个正常的 div 一样。你也可以使用 border 来保持细线水平居中，我已经分配了 height：1px; 而且使用保证金填补空缺。

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.

这篇关于在每个< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！