I am having trouble putting list items inline

Question

I have some list items with anchor tags, that are set to display block with background images and I am trying to set them up to display inline but right now they only stack on each other. The ul is being generated by wordpress. When I inspect the li's they fill the entire parent div, but I'm not sure why.

link to active site password: springy88

CSS

.nav-bar li {display: inline; font-size: 2.66em;}
.shop a{background-image:url('../images/shopFull.png'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}
.shop a:hover { background-position: 0 -30px; }
.services a{background-image:url('../images/servicesFull.jpg'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}

HTML

<nav class="menu-main-nav-container"><ul id="menu-main-nav" class="nav-bar"><li id="menu-item-17" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.goodmorningmoon.ca/shop/">Shop</a></li>
<li id="menu-item-16" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.goodmorningmoon.ca/services/">Services</a></li>
<li id="menu-item-18" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://www.goodmorningmoon.ca/blog/">Blog</a></li>
<li id="menu-item-15" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.goodmorningmoon.ca/contact/">Contact</a></li>
</ul></nav>

score 3 · Accepted Answer · answered Mar 12 '12 at 02:10

3

You should add float propiety to the li selector.. try this.

.nav-bar li {display: inline; font-size: 2.66em; float: left;}

Adding some margin could help too

and remember to create a div with clear:both css proriety after the menu

answered Mar 12 '12 at 02:10

byroncorrales

745
6
12

When you float an element, it gets implicit `display: block`. And floating the links looks a little messy, it's actually throwing them out of the `
`s.

bfavaretto

Mar 12 '12 at 03:02

score 1 · Answer 2 · answered Mar 12 '12 at 02:21

1

try

( * ) IE Fixes

  .nav-bar li{
       display: inline-block;
       *display: inline;
       *zoom: 1;
    }

answered Mar 12 '12 at 02:21

Philip

4,592
2
20
28

I am having trouble putting list items inline

2 Answers2