CSS導航錯誤

Question

我在創建水平導航時遇到了問題。我的問題是，當我想弄亂UL的UL & UL的列表項目的邊距和填充。

這是我遇到的問題：

1. 當我試圖改變它好像我只能勉強得到UL的保證金頂向下移動列表項的機頂&漢字性質。

2. 當我使用margin和padding的-right和-left屬性時，我得到的垃圾超出導航。我試圖改變寬度來克服這一點，但它沒有幫助。

& HTML CSS代碼提供如下：

<div id="HorizNav"> 
    <ul> 
    <li><a href="#">Link #1</a></li> 
    <li><a href="#">Link #2</a></li> 
    <li><a href="#">Link #3</a></li> 
    <li><a href="#">Link #4</a></li> 
    <ul> 
</div> 

#HorizNav ul { 
    float: right; 
    text-Align: left; 
    width: 660px; 

    background: #ff0000; 
    color: #fff; 
    font-size: 1.5em; 

    padding-top: 0px; padding-bottom: 0px; 
    padding-left: 5px; padding-right: 5px; 
} 

#HorizNav ul li { display: inline; } 

#HorizNav ul li a { 
    text-decoration: none; 
    background-color: #0000ff; 
    color: #fff; 
} 

請幫助。提前致謝。

Answer 1

您沒有關閉ul標記。第二個<ul>應該是</ul>

我認爲您正在尋找box-sizing: border-box;。

#HorizNav ul { 
    ... 
    box-sizing: border-box; 
    ms-box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    moz-box-sizing: border-box; 
    ... 
} 

Demo