使用CSS居中列表

我在導航欄居中時遇到問題，我可以看到問題，但我無法找到解決方案。對不起，我對CSS很陌生。使用CSS居中列表

Header bar with inspect element

正如你可以看到有在列表前面的一個額外的塊。我已經搜索了一些修補程序，但似乎無法使用絕對定位，我不想使用它。

這裏是一個的jsfiddle頁面告訴你正是我的意思 - https://jsfiddle.net/h4ay0voj/2/

HTML代碼：

<header> 
    <h1>Header</h1> 
    <ul class="menu"> 
     <a class="active" href=""> 
      <li class="selected">Link1</li> 
     </a> 
     <a href=""> 
      <li>Link2</li> 
     </a> 
     <a href=""> 
      <li>Link3</li> 
     </a> 
     <a href=""> 
      <li>Link4</li> 
     </a> 
     <a href=""> 
      <li>Link5</li> 
     </a> 
    </ul> 
</header>

CSS代碼：

header{ 
    width:80%; 
    overflow: hidden; 
    color:#ffffff; 
    margin-bottom:1%; 
    background: #292E37; 
} 

header a:link {text-decoration:none;color:#ffffff;} 
header a:visited{color:#ffffff;} 
header a:hover{color:#292E37;} 
header a.active{color:#4db8ff;font-weight:bold;cursor:default} 
header h1{text-align: center;} 

ul.menu{ 
    width:40%; 
    text-align:center; 
    text-decoration:none; 
    color: #000000; 
    margin-left: auto; 
    margin-right: auto; 
} 

ul.menu li{ 
    display: inline; 
    padding: 1%; 
    transition: background 0.2s; 
    padding-bottom:2.25%; 
} 

ul.menu li:hover{ 
    background:#a7afbe; 
    transition: 0.3s ease; 
    border-bottom: 3px solid #4db8ff; 
}

任何幫助將不勝感激:) 在此先感謝！

來源

2016-08-03 Matt G

我真的不明白你的問題？你想中心導航欄？ – Anokrize

嘗試將'padding：0'添加到'ul.menu' – SimianAngel

不確定其他瀏覽器，但對於Chrome，您可以看到正在應用-webkit-padding-start: 40px;。

您可以將元素的填充正好被設置爲0，像這樣：

https://jsfiddle.net/byj0ye8g/

或者，像這樣的問題，最好的辦法是使用一個CSS復位喜歡這裏：http://meyerweb.com/eric/tools/css/reset/

此外，將您的錨標籤放置在列表項標籤內，而不是圍繞它們。

來源

2016-08-03 22:02:41

您用於導航欄的寬度太小，導致導航欄的「碾壓」。 UL類菜單的寬度已增加到60％。我更新了JSFiddle頁面，所以你可以看看它是否正確。

下面是正確的代碼：

ul.menu{ 
    width:60%; 
    text-align:center; 
    text-decoration:none; 
    color: #000000; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2016-08-03 23:11:03 wingit86

使用CSS居中列表

回答

相關問題