CODEWITHSUNDEEP
cssmenuinline
MrBubbles
MrBubbles

Reputation: 53

CSS Horizontal Menu: display: inline AND block? Make link cover whole LI?

Normally, to make the link fill out the whole li, I use display: block;. But with a horizontal menu, I need to set it to display:inline; so it goes in one line. I've tried display:inline-block; but that doesn't help. I've seen horizontal menus that accomplish this, but I can't find out how from their source.

Any ideas? Thanks.

Upvotes: 4

Views: 38917

Answers (4)

Finbarr
Finbarr

Reputation: 32206

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

Upvotes: 2

Nathan
Nathan

Reputation: 11159

This should do it:

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253506

Apply height and width to the parent li elements, and then:

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

JS Fiddle demo.

Upvotes: 8

Residuum
Residuum

Reputation: 12064

Is that your setup:

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

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

ul#nav li {display: inline;}

Or float the li and give it a width:

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

Upvotes: 0

Related Questions