CSS Horizontal Menu: Display: Inline And Block? Make cover link as a whole LI?

Question

Usually, for a link to fill the entire li , I use display: block; . But with a horizontal menu, I need to set it to display: inline; therefore it goes on one line. I tried display:inline-block; but it doesn’t help. I have seen horizontal menus that do this, but I can't find out how from their source.

Any ideas? Thanks.

Answer 1

Apply height and width to li 's parent elements, and then:

 a { display: inline-block; height: 100%; width: 100%; } 

JS Fiddle demo .

Answer 2

 ul { width: 100%; overflow: hidden; } li { float: left; list-style: none; } li a { float: left; padding: 5px; background: red; color: white; } 

See: http://pastehtml.com/view/1cdzwnz.html

Answer 3

This should do it:

 ul.menu>li { display: inline-block; width: 40px; border: 1px black solid; } ul.menu>li>a { display: block; } 

Answer 4

This is your setup:

 <ul id="nav"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> </ul> 

Your link will not populate the <li> , but the <li> will still be a block element. Make <li> display: inline :

 ul#nav li {display: inline;} 

Or float li and give it a width:

 ul#nav {overflow: hidden;} ul#nav li {float: left; width: 50%;}