水平導航欄中心，但鏈接是垂直的？

所以基本上我的問題是我的CSS中心導航欄罰款，但所有的鏈接垂直列在水平居中的酒吧。水平導航欄中心，但鏈接是垂直的？

它結束了看起來像
http://i.imgur.com/rqcXwk4.png
但我需要這些鏈接是水平的。

<nav id="nav"> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#baa">Description</a></li> 
    </ul> 
</nav>

而CSS

} 
nav ul { 
display:inline; 
} 
.nav li{ 
    display:inline; 
} 
.nav a{ 
    float:left; 
    display:inline-block;  
    padding:10px; 
} 
nav a:link, a:visited { 
    display: block; 
    width: 100%; 
    font-family: Refrigerator; 
    font-weight: bold; 
    font-size: 1.5em; 
    color: #FFFFFF; 
    background-color: #778899; 
    text-align: center; 
    padding: 4px; 
} 

nav a:hover, a:active { 
    background-color: #FF3333; 
    color: black; 
}

來源

2015-09-30 Josh

這個問題已經被問了一堆的時候，你正在試圖做的是_center水平list_。這裏是[一個例子]（http://stackoverflow.com/questions/17266618/how-do-i-center-floated-list-items）。 – hungerstar

 #nav ul { 
 
      display:inline; 
 
     } 
 
     #nav li{ 
 
      display:inline-block; 
 
     } 
 
     #nav a{ 
 
      float:left; 
 
      display:inline-block; 
 
      padding:10px; 
 
     } 
 
     nav a:link, a:visited { 
 
      display: block; 
 
      width: 100%; 
 
      font-family: Refrigerator; 
 
      font-weight: bold; 
 
      font-size: 1.5em; 
 
      color: #FFFFFF; 
 
      background-color: #778899; 
 
      text-align: center; 
 
      padding: 4px; 
 
     } 
 

 
     nav a:hover, a:active { 
 
      background-color: #FF3333; 
 
      color: black; 
 
     }

<nav id="nav"> 
 
     <ul> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#baa">Description</a></li> 
 
     </ul> 
 
    </nav>

希望，它將幫助。

來源

2015-09-30 14:54:51 4ra

您的CSS目標對象爲class="nav"而不是id="nav"。將.更改爲#，它應該可以正常工作。

來源

2015-09-30 14:56:55 Dygestor

您需要重溫關於CSS的講座。您可能也會對使用flexbox感興趣，如下面的代碼片段所示。

nav a { 
 
    font-family: Refrigerator; 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    color: #FFFFFF; 
 
    background-color: #778899; 
 
    text-align: center; 
 
    padding: 4px; 
 
} 
 

 
nav a:hover { 
 
    background-color: #FF3333; 
 
    color: black; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    justify-content: center; 
 
}

<nav id="nav"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#baa">Description</a></li> 
 
    </ul> 
 
</nav>

來源

2015-09-30 14:57:36 Orland

水平導航欄中心，但鏈接是垂直的？

回答

相關問題