Question

我有一些带锚标记的列表项，设置为显示带有背景图像的块，我试图将它们设置为内联显示，但现在它们只相互堆叠。 ul是由wordpress生成的。当我检查li时，他们会填满整个父div，但我不确定原因。

link到活动网站密码：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>

Answer 1

你应该将float属性添加到li选择器中。试试这个。

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

添加一些保证金也有帮助

并记得创建一个带有clear的div：菜单

后的两个css优先级

Answer 2

试

（*）IE Fixes

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

我无法将列表项内联

2 个答案: