Unordered list with boxes

Question

I have an unordered list where the list items are displayed horizontally. Each list item should contain some text and images. When I add content to them the list item is no longer aligned.

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

Jsbin: https://jsbin.com/fobopayaco/edit?html,css,output

Is there som css I can add to fix this? Or should I change my markup?

Nenad Vracar · Accepted Answer · 2016-06-10 13:01:49Z

7

You can just set vertical-align to top for example

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

answered Jun 10, 2016 at 13:01

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ajm · Accepted Answer · 2016-06-10 13:03:54Z

3

By adding text, you're seeing the effects of the default vertical-align property: your list-items are being aligned to the baseline.

If you want them all to be aligned in the same spot, specify a vertical-align property for all of them:

li{
  border:1px solid blue;
  display:inline-block;
  height:100px;
  vertical-align: top;
  width:100px;
}

answered Jun 10, 2016 at 13:03

ajm

20.2k3 gold badges34 silver badges38 bronze badges

Comments

SunKnight0 · Accepted Answer · 2016-06-10 13:03:19Z

1

The list just doesn't like empty items. If you need an item to be empty for some reason use <li> </li>, otherwise once you add content to all items normalcy will return.

answered Jun 10, 2016 at 13:03

SunKnight0

3,3611 gold badge13 silver badges8 bronze badges

Comments

pix1289 · Accepted Answer · 2016-06-10 13:03:58Z

0

Try float:left on li instead of display:inline-block

answered Jun 10, 2016 at 13:03

pix1289

5141 gold badge9 silver badges27 bronze badges

Comments

pes502 · Accepted Answer · 2016-06-10 13:04:16Z

0

Or you can use float to left for every <li>

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
  float: left;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

answered Jun 10, 2016 at 13:04

pes502

1,5973 gold badges17 silver badges33 bronze badges

Comments

jitendra varshney · Accepted Answer · 2016-06-10 13:13:32Z

0

you can add float :left or display:inline in your css

    li{
      border:1px solid blue;
      display:inline-block;
      height:100px;
      width:100px;  
     display:inline;
    }

and here is working fiddle

https://jsfiddle.net/5dh2ak3a/

answered Jun 10, 2016 at 13:13

jitendra varshney

3,5622 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

Unordered list with boxes

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related