建立一個流體水平導航

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/