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

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