2013-03-19 114 views
0

嗨,我想知道我的UL是如何來到38px高度,但LI不適合100%身高。LI高度與UL相同

ul#ordermenu{ 
    height:38px !important; 
    width:100% !important; 
    line-height:38px; 
} 

ul#ordermenu li 
{ 
height:38px !important; 
display: inline; 
list-style-type: none; 
padding-right: 100px; 
color:#000; 
line-height:38px; 
font-size:20px; 
} 

ul#ordermenu li:last-child { 
    padding-right:-100px; 
} 
ul#ordermenu li.active 
{ 
height:38px !important; 
line-height:38px; 
background: #e6f0a3; /* Old browsers */ 
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0); /* IE6-9 */ 

} 

我的HTML代碼

<ul id="ordermenu"> 
     <li class="active">Items</li> 
     <li>Checkout Status</li> 
     <li>Postage Details</li> 
    </ul> 
+0

也許是因爲你已經將它們定義爲不重要? – Timmy 2013-03-19 22:16:25

+1

??你是什​​麼意思 – RussellHarrower 2013-03-19 22:17:33

+0

嘗試'位置:inline-block'爲'''''css聲明。 – VKen 2013-03-19 22:18:34

回答

2

li不38px高大的原因是因爲display: inlineul#ordermenu li

試試這個:

#ordermenu li { 
    display: inline-block; 
    height: 38px; 
} 
2

您無法分配高度爲內聯元素,正如您爲所做的那樣。嘗試將display屬性更改爲'inline-block'。這將允許您給列表項目一個特定的高度,同時仍然水平排列它們。