CODEWITHSUNDEEP
csshtml-listslinecss-tables
Mohannad Al Amad
Mohannad Al Amad

Reputation: 1

How to make a table from ul tag using CSS

I have UL element inside it there is 3 li tags I want to put them next to each other separated by lines: 

<ul>
 <li>value 1</li>
 <li>value 2</li>
 <li>value 3</li>

</ul>

I want the output to look like this:

value 1 | value 2 | value 3

BTW in the li tags their is a picture and a text, I want them (image & text) next to each other and in the center of the box using CSS.

Upvotes: 0

Views: 3901

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

Inline-block seems to be the better as all answers talks about it.

To be sure that everything stands on 1 line , you may use : white-space:nowrap;

To draw the pipes, you have borders , but it could be background or box-shadow.

Box-shadow can be used to fill the white-space that apper usually in between inline-boxes.

Selecteur + can be used , so first element will not draw any pipe , it is shorter to write than :first-child, :first-of-type, :nth-child(1) :last-child, ... or :last-of-type.

Basic CSS could be :

li + li {  
  box-shadow:-4px 0px rgba(255,255,255,0.4);   /* unblured left shadow and fill white-space*/
}

ul {  
  text-align:center;  /* center li */
  white-space:nowrap; /* force 1 line*/
}
 li {
  display:inline-block;
}
li:hover {
  background:white;/* demo purpose */
}

TEST

Upvotes: 0

Kjeld Schmidt
Kjeld Schmidt

Reputation: 768

ul li {

  // EITHER
  float: left; //Will make all li's be on a single line.
  //  OR
  display: inline-block;

  //Always followed by:
  border-right: 1px solid black;  // will give it the seperating line you want
}

ul {
  list-style: none // will remove the dot.
}

Downside: This will create a black bar not only in between the li's but also behind the last one. There are multiple workarounds using pseudo-selectors like :last-child, :nth-child(n-1) and more.

This http://jsfiddle.net/tEBF4/6/ shows the difference between inline-block, float, and float with clear: left on the list itself. (Thanks to Sophisticake) and also one method of removing the last in-between-line. It becomes clear: there are multiple ways of doing this with only very minor differences.

Float

Makes the list, well, float, so other elements can be next to it.

Inline-block

While the li's are now inline, this method retains the "block" behavior of the ul itself, so nothing goes next to it.

Upvotes: 1

Related Questions