Html 在行内元素之间添加垂直和水平分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23631391/
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
Add vertical and horizontal separators between inline elements
提问by netAction
There are multiple inline elements in one container:
一个容器中有多个内联元素：
<p>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>consecutetur</span>
</p>
What I need is a vertical separator between the elements that are in the same row and a horizontal separator between the lines. How does this work in CSS?
我需要的是同一行元素之间的垂直分隔符和行之间的水平分隔符。这在 CSS 中是如何工作的？
采纳答案by netAction
回答by potashin
You can apply borderto your spanelements to get horizontal separators:
您可以应用border到您的span元素以获取水平分隔符：
p span:not(:first-child){
border-left:1px solid #000;
}
But you should change your structure to apply vertical separator. Like this :
但是您应该更改结构以应用垂直分隔符。像这样 ：
HTML:
HTML:
<p>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
</p>
<p>
<span>sit</span>
<span>amet</span>
<span>consecutetur</span>
</p>
CSS :
CSS :
p:not(:first-child){
border-top:1px solid #000;
}
回答by Gino Pane
For example, for a such markdown:
例如，对于这样的降价：
<ul id="nav">
<li><a href="page1.htm">1</a></li>
<li><a href="page2.htm">2</a></li>
<li><a href="page3.htm">3</a></li>
</ul>
Just use such css code:
只需使用这样的 css 代码：
#nav li {
display: inline-block;
}
#nav li + li:before {
content: " | ";
padding: 0 10px;
}
Try on your own in the fiddle here
在此处的小提琴中自行尝试
回答by Md Johirul Islam
You can try this. I hope this will solve your problem
你可以试试这个。我希望这能解决你的问题
<p>
<span>Lorem</span>
<hr style="width: 1px; height: 50px; color: #000;">
<span>ipsum</span>
<hr style="width: 1px; height: 50px; color: #000;">
<span>dolor</span>
<hr style="width: 1px; height: 50px; color: #000;">
<span>sit</span>
<hr>
<span>amet</span>
<hr style="width: 1px; height: 50px; color: #000;">
<span>consecutetur</span>
</p>
回答by Richa
You can do something like below and also check Fiddle Demo
您可以执行以下操作并检查Fiddle Demo
span{
border-left:1px solid;
padding-left:5px;
}
.bottom{
border-bottom:1px solid;
}
