在内联元素之间添加垂直和水平分隔符

Question

一个容器中有多个内联元素：

<p>
  <span>Lorem</span>
  <span>ipsum</span>
  <span>dolor</span>
  <span>sit</span>
  <span>amet</span>
  <span>consecutetur</span>
</p>

我需要的是位于同一行的元素和行之间的水平分隔符之间的垂直分隔符。这在CSS中如何工作？

Answer 1

您可以将border应用于span元素以获取水平分隔符：

p span:not(:first-child){
  border-left:1px solid #000;
}

Example

但是你应该改变你的结构来应用垂直分隔符。像这样：

HTML ：

<p>
   <span>Lorem</span>
   <span>ipsum</span>
   <span>dolor</span>
</p>
<p>
   <span>sit</span>
   <span>amet</span>
   <span>consecutetur</span>
</p>

CSS：

p:not(:first-child){
    border-top:1px solid #000;
}

Example

Answer 2

我想我明白了。不漂亮，但似乎工作。

p {
    overflow: hidden;
}

p span {
    margin: -1px 1px 1px -1px;
    line-height: 2em;
    border-top: 1px solid blue;
    border-left: 1px solid green;
    padding: 0.4em;
    float: left;
}

Fiddle

Answer 3

例如，对于这样的降价：

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

只需使用此类css代码：

#nav li {
    display: inline-block;
}

#nav li + li:before {
    content: " | ";
    padding: 0 10px;
}

在小提琴here

中尝试自己

Answer 4

您可以执行以下操作，还可以检查 Fiddle Demo

span{
    border-left:1px solid;
    padding-left:5px;

}

.bottom{
        border-bottom:1px solid;
}

Answer 5

你可以试试这个。我希望这能解决你的问题

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