（新）製作水平列表

Question

我被要求爲我的網站製作水平菜單，實際上這只是一個無序列表，這是必要的。但是我無法擺脫它的「垂直狀態」。

目前這是我的HTML列表本身的代碼;

<ul id="horizontaal"> 
     <li><a href="index.html">Index</a></li> 
     <li><a href="mijnsoftware.html">Mijn Software</a></li> 
     <li><a href="browsers.html">Browsers</a></li> 
     <li><a href="registratie.html">Registratie</a></li> 
    </ul> 

在CSS這是;

ul li { 
    background-color: grey; 
    border: 5px solid #999999; 
    list-style-type: none; 
    margin-bottom: 5px; 
    margin-top: 5px; 
    text-align: center; 
    padding: 3px; 
    width: 10%; 
    float: left; 
    clear: both; 
    width:150px; 

} 
ul { 
    margin-bottom: 70%; 
    margin-right: 100px; 
    float: left; 

} 

而且這個水平列表中特殊：

#horizontaal { 
     width: 100%; 
    } 

#horizontaal li { 
    width: 10%; 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    display: inline; 
} 

，要求該列表佔用了約100％我的屏幕的寬度。

http://i.imgur.com/6HEsS8m.png

編輯：

我沒有注意到我，在我的代碼更明顯的錯誤，我很抱歉，我應該已經採取了一些時間，然後再發布;我真誠的道歉。

至於這個代碼是我現在有：

ul li { 
    background-color: grey; 
    border: 5px solid #999999; 
    list-style-type: none; 
    margin-bottom: 5px; 
    margin-top: 5px; 
    text-align: center; 
    padding: 3px; 
    width: 150px; 



} 
ul { 
    margin-bottom: 70%; 
    margin-right: 100px; 
    float: left; 

} 

#horizontaal { 
    width: 100%; 
} 

#horizontaal li { 
    width: 10%; 
    margin-right: 0px; 
    margin-left: 0px; 
    display: inline; 

} 

我的目錄似乎是現在的水平排列的，但我的鍛鍊; Tibial狀態如下：「讓列表項浮動列表本身可能不浮動。」但是我讀過關於內聯顯示不能與float一起使用的註釋。

Answer 1

你試試這個CSS代碼來製作水平菜單。

ul{list-style-type:none;} 
ul li{display:inline-block; background-color:#ef8913; padding:5px;} 
ul li a{ color:blue} 

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    </ul> 

這是工作鏈接。 http://jsbin.com/kunavupa/1/edit

Answer 2

試試這個jsfiddle。

你唯一的問題就是你做了什麼，你是否每和lifloat: left，只是解決你的問題。

Answer 3

您需要設置顯示屬性。其他可能的顯示選項：（內聯塊，塊等）。我會使用

UL李{

顯示：塊

}