CODEWITHSUNDEEP
css
waanders
waanders

Reputation: 9083

Force width menu items horizontal list (CSS)

How can I force all items in a horizontal list (menu) to be the same width?

This is my CSS code so far:

a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
  padding:10px;
  margin:2px;
  background:grey;
  color:white;
}
#navlist li a:hover {
  color:white;
  background:black;
}

EDIT:

It now works (thanks to @Gaby) by changing the first 3 lines into:

#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }

Upvotes: 0

Views: 5380

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

float the elements and make them block instead of inline

#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }

You might want to make the a to be block as well, to fill the li and make it all clickable..

Upvotes: 1

Related Questions