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

Question

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

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

我需要的是在同一行中的元素之间有一个垂直分隔符，在不同行之间有一个水平分隔符。如何使用CSS实现这个效果？

请参考下图：

- netAction

---

我不是CSS大师，但我认为如果不稍微改变你的HTML结构，你可能会在动态垂直线方面遇到困难。 - Paddy

你必须保留这个HTML吗？ - valerio0999

不，HTML可以更改。但是每行的容器不可能存在，因为我不知道每个单词的宽度。 - netAction

你不能仅使用HTML/CSS来实现你想要的功能，因为在段落中选择第n行是不可能的，你需要使用JavaScript（在谷歌上有很多获取第n行的函数）。 - Holt

Answer 1

您可以将border应用于span元素，以获得水平分隔线：

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

示例

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

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

示例

- potashin

---

对于水平线来说是个好主意，但对于竖直线来说就不可能了，因为我不知道文字的宽度。 - netAction

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

- netAction

---

有点取巧，但这正是我需要的。谢谢。 - Spudley

Answer 3

例如，对于这样的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>

只需使用以下CSS代码：

#nav li {
    display: inline-block;
}

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

在这里尝试自己的技术：点此

- Gino Pane

---

这样做不起作用，因为它会在除第一行之外的每一行开头添加分隔符。水平线丢失了。 - netAction

@netAction，哦，是的，我没看到你还需要一条水平线。那么，你上面已经有答案了。 - Gino Pane

Answer 4

你可以像下面这样做，还可以查看Fiddle Demo。

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

}

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

- Richa

---

这样做不起作用，因为它在除第一行外的每一行开头都添加了分隔符。 很遗憾，无法为每一行添加DIV元素。 - netAction

@netAction 你指的是下面这行代码是什么意思？ - Richa

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>

- Md Johirul Islam

---

远远不够...http://jsfiddle.net/ghLtx/ 而且添加标记以实现样式？ - Pevara