CSS水平列表項目

Question

因此，我試圖創建一個水平列表以供我在設計的新網站上使用。我已經嘗試了一些已經在網上找到的建議，例如將'float'設置爲左側等，但在修復問題時這些建議都沒有奏效。

ul#menuItems { 
 
     background: none; 
 
     height: 50px; 
 
     width: 100px; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    ul#menuItems li { 
 
     display: inline; 
 
     list-style: none; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     top: 0px; 
 
     height: 50px; 
 
    } 
 
    ul#menuItems li a { 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     text-decoration: none; 
 
     font-weight: bolder; 
 
     color: #000; 
 
     height: 50px; 
 
     width: auto; 
 
     display: block; 
 
     text-align: center; 
 
     line-height: 50px; 
 
    }

<ul id="menuItems"> 
 
    <li> 
 
    <a href="index.php">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="index.php">DJ Profiles</a> 
 
    </li> 
 
</ul>

目前我不能確定是什麼原因造成這個問題的，我將如何去化解呢？

Answer 1

更新回答

我注意到很多人都在用這樣的回答，所以我決定來更新它一點點。如果您想查看原始答案，請查看下面的內容。新的答案演示瞭如何將一些樣式添加到列表中。

ul > li { 
 
    display: inline-block; 
 
    /* You can also add some margins here to make it look prettier */ 
 
    zoom:1; 
 
    *display:inline; 
 
    /* this fix is needed for IE7- */ 
 
}

<ul> 
 
    <li> <a href="#">some item</a> 
 

 
    </li> 
 
    <li> <a href="#">another item</a> 
 

 
    </li> 
 
</ul>

Answer 2

一個更好的方法是使用inline-block，因爲你並不需要在列表的末尾使用clear:both了。

試試這個：

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

CSS：

ul > li{ 
    display:inline-block; 
} 

看一看在這裏：http://jsfiddle.net/shahverdy/4N6Ap/

Answer 3

這撥弄瞭如何

http://jsfiddle.net/9th7X/

ul, li { 
    display:inline 
} 

在列表和CSS這裏大參考：

http://alistapart.com/article/taminglists/

Answer 4

您還可以使用內嵌塊，以避免浮動元素

<ul> 
    <li> 
     <a href="#">some item</a> 
    </li> 
    <li> 
     <a href="#">another item</a> 
    </li> 
</ul> 

，然後風格：

li{ 
    /* with fix for IE */ 
    display:inline; 
    display:inline-block; 
    zoom:1; 
    /* 
    additional styles to make it look nice 
    */ 
} 

這種方式你不會需要浮動任何東西，消除th e需要clearfixs

Answer 5

Here您可以找到一個工作示例，其中提供了一些關於動態調整列表大小的更多建議。

我用顯示：inline-block的和百分比填充，這樣父列表可以動態改變大小：

display:inline-block; 
padding:10px 1%; 
width: 30% 

加上兩個規則消除填充第一個和最後一個項目。

ul#menuItems li:first-child{padding-left:0;} 
ul#menuItems li:last-child{padding-right:0;}