Html 将水平线附加到每个 <li>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19197567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append horizontal rule to each <li>
提问by ProfHase85
For my <ul>list, I would like to add a <hr>after each element of a list. The Result should render like:
对于我的<ul>列表，我想<hr>在列表的每个元素之后添加一个。结果应呈现如下：
<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:
添加<hr>到每个样式都是不好的样式，<li>所以我想仅使用 css 来折射它。我不能使用：
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
因为内容会转义字符。
I also do notwant to use jQuery:
我还没有想使用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?
所以问题是，我如何使用css3附加<hr width="40%">到每个<li>特定列表中？
回答by Mr. Alien
jQuery Solution
jQuery 解决方案
Just realized that you wanted to nest the hrelement inside the libefore you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do thisusing CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
刚刚意识到你想在关闭它之前将hr元素嵌套在里面li，是的，它完全有效，所以只需使用append()，并注意，你不能只使用 CSS来做到这一点，因为你不能使用 CSS 修改 DOM，你需要使用 jQuery 或JS
jQuery("ul li").append("<hr />");
CSS Solution
CSS 解决方案
If you don't need an extra element, or you don't want a jQuery solution(As you want)
如果您不需要额外的元素，或者您不需要 jQuery 解决方案（如您所愿）
Using hrelement as a direct child to ulelement is not a valid markup, instead, you can use a border-bottomfor each liwhich will behave same as hrdoes, still if you want an explicit way to do so, say for controlling the widthof the separator without changing the widthof lithan you can do it like this
使用hr元素作为元素的直接子ul元素不是一个有效的标记，相反，您可以使用border-bottomfor each li，其行为与hrdo相同，但如果您想要一种明确的方式这样做，例如控制width分隔符的 而不改变width的li比你可以做这样的
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual blocklevel 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 borderon this but to keep the thin line horizontally centered, I've assigned height: 1px;and than am using marginto space up.
在这里，我只是创建一个虚拟block级别元素，它实际上并不存在于 DOM 中，但它只会做你需要的事情。您可以像设计普通div. 您也可以border在此使用，但要保持细线水平居中，我已分配，height: 1px;而不是使用margin空间。
回答by Farid Rn
I think it's better to use CSS for this. for example you can stop using <hr>tag, instead do something like:
我认为最好为此使用 CSS。例如，您可以停止使用<hr>标签，而是执行以下操作：
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
然后使用 CSS：
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
还有其他选项，例如，如果您只想为某些列表项显示水平线，您可以给它们一个类并仅为该类添加 CSS 规则。像这样：
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
和 CSS：
.mylist li.hr { border-bottom: 1px solid black; }
回答by Farid Rn
You can use like this:
你可以这样使用：
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested uland lithen you use liinstead of <hr/>or simply <hr/>inside a <li></li>tag. See below. Its purely your choice.
那很简单。如果您已经嵌套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>
回答by kwarunek
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
内容中的标签是不允许的，即使它会非常具有误导性（css { content: "text"}, How do i add tags?）
If you think is wrong to add <hr>in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
如果您认为添加<hr>HTML 是错误的，那么添加 css（如果可能的话）或 js 是错误的。恕我直言，首先您应该尝试使用<li>边框，如果结果不符合预期，请添加<hr>
回答by Dev_x7xClownx7x
Insert A ClassThat Creates A bottom-border:For Each <li>
插入ClassAbottom-border:为每个创建 A<li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
