Add vertical and horizontal dividers between inline elements

Question

There are several built-in elements in one container:

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

I need a vertical separator between elements that are on the same line, and a horizontal separator between the lines. How does it work in CSS?

Answer 1

I think I get it. Not pretty, but it 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 2

You can apply borderto your elements spanto get horizontal dividers:

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

Example

But you have to change your structure to apply a 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 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;
}

Answer 4

You can do something like below and also check the Fiddle Demo

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

}

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

Answer 5

You can try this. I hope this solves 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>