建立一个流体水平导航

Question

我试图建立一个使用％的水平导航，我似乎无法弄清楚发生了什么事情。我已经把它设置成了我想要的东西，但是每当我给A或LI指定一个尺寸时就没有什么变化，因此，我只能看到我的背景图像。

<div id=mainwrap> 

<div id=header> 

    <div id = title> 
    <img src="images/hangaquilt.png" width="483" height="78" alt="Hang A Quilt"> 
    </div> 

    <div id = cartstatus> 
    <p> Your Cart Is Empty </p> 
    </div> 

     <div id=nav> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">View Cart</a></li> 
     <li><a href="#">Dealers</a></li> 
     </ul> 
    </div> 

</div> 

<div id=bodycontent> 

    <div id=sidebar> 
    </div> 

    <div id=bodytext> 
    </div> 

</div> 

<div id=slideshow> 
</div> 

<div id=footer> 
</div> 






</div> 

和CSS

body { 
background-color: rgb(238,225,185); 
} 

#mainwrap { 

margin: 0 auto; 
height: 700px; 
width: 75%; 
max-width:1024px; 
min-width:800px; 
} 

#header { 
margin: 0 auto; 
margin-top: 3%; 
width: 100%; 
height: 25%; 
} 
#header img{ 
margin-left: 3.3%; 
} 
#title { 
float:left; 
width: 55%; 
} 
#cartstatus{ 
float: right; 
width: 45%; 
} 

#cartstatus p{ 
margin-right: 7.1%; 
float: right; 
} 
#nav{ 
clear: both; 
width: 100%; 
height: 33%; 
font-family:"Rockwell Extra Bold",Trebuchet MS, Arial, Helvetica, sans-serif; 

} 
#nav ul { 
height: 100%; 
list-style-type: none; 
text-align: center; 
} 
#nav li{ 
padding: 0; 
width: 20%; 
height: 100%; 
font-size:18px; 
display:inline; 
} 
#nav ul li a{ 
background-image: url(../images/navbg.png); 
width: 19%; 
height: 98%; 
color: black; 
text-decoration: none; 
} 

我做导航之前喜欢这一点，并且从未有过这个问题。这真是令人沮丧，因为我知道这很简单，我错过了。

Answer 1

如果将元素定义为“inline”，则无法更改它的宽度或高度。 而不是

display:inline; 

尝试

display:inline-block; 

这里是你想要的东西：http://jsfiddle.net/JmTKb/