嘗試一個內聯菜單

即時通訊嘗試做一個簡單的菜單，5行水平對齊，使用CSS。嘗試一個內聯菜單

HTML

<div class="container clearfix"> 
    <!-- Conteúdo --> 
    <div id="menu"> 
     <!-- Menu da página --> 
     <div class="nav"> 
      <ul> 
       <li><a href="#main">Principal</a> 

       </li> 
       <li><a href="#corte">Cortes</a> 

       </li> 
       <li><a href="#equipa">Equipa</a> 

       </li> 
       <li><a href="#sobre">Sobre Nós</a> 

       </li> 
       <li><a href="#contacto">Contatos</a> 

       </li> 
      </ul> 
     </div> 
     <!-- Fim class nav --> 
    </div> 
    <!-- Fim ID menu -->

CSS

body{ 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

body { 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

.container { 
    width: 1024px; 
} 

a { 
    text-decoration: none; 
} 

#menu{ 
    background-color: #000000; 
    position: fixed; 
    width: 100%; 
    height: 100px; 
    line-height: 5px; 
    font-weight: bold; 
    font-size: 12px; 
} 

#menu ul{ 
     margin-top: 50px; 
} 

#menu li { 
    text-decoration: none; 
    list-style: none; 
    padding: 5px 10px 50px 10px; 
    display: inline; 
} 
#menu li a:hover { 
    background-color: green; 
    padding: 50px 15px 5px 15px; 
    color: black; 
} 
#menu a { 
    color: white; 
    text-transform: uppercase; 
}

問題：我不能居中菜單鏈接，我不能讓他們在中間（水平對齊）黑條。

有人可以幫忙嗎？

編輯：我管理，使其更好，但問題是：我不能分開的菜單鏈接，所以他們不動的時候，我們有鼠標

來源

2014-03-04 uniqezor

http://jsfiddle.net/LVCkp/3/我使用的固定空間，實現了位置。

#menu ul{ 

    line-height: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    margin-top: 70px; 
    margin-left: 70px; 
}

來源

2014-03-04 22:13:20

這幾乎是解決方案，我只需要一個：懸停不要將其他菜單鏈接移動到兩側 – uniqezor

那麼，這看起來很難。我試過但無濟於事。在a：hover中的填充正在導致文本向左移動。最直接的方法是刪除填充，但我知道視覺效果會受到很大影響。 – 2014-03-04 22:48:08

您#menu ul CSS更改爲：

#menu ul { 
    line-height: 5px; 
    font-weight: bold; 
    font-size: 12px; 
    margin-top: 75px; 
    text-align: center; 
}

jsFiddle example

我加入text-align: center和改變你的邊距到960x75像素。

來源

2014-03-04 22:07:46 j08691

沒有工作，我想我解決了這個問題 – uniqezor

你是什麼意思，它沒有工作？小提琴顯示它的工作。 – j08691

居中工作，但我現在的問題是：當您將鼠標放在一個鏈接上時，其他人移動到兩側 – uniqezor

嘗試把float:left在UL和擺脫的fixed:position

來源

2014-03-04 22:07:54 user2684452

嘗試一個內聯菜單

回答

相關問題