Add vertical and horizontal separators between inline elements

Question

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?

Answer 1

You can apply border to your span elements to get horizontal separators:

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

Example

But you should change your structure to apply vertical separator. Like this :

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

I think I got it. Not beautiful but seems to work.

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

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:

#nav li {
    display: inline-block;
}

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

Try on your own in the fiddle here