分區底部的水平列表

我想採取綠色彩帶底部的導航列表。

誰能告訴我哪種風格會對我有幫助嗎？下面

只是添加代碼：

<div id="navigation"> 
      <div id="navBar"> 
       <ul> 
        <li>Home</li> 
        <li>Application Tracker</li> 
        <li>Insurance Policy downloads</li> 
        <li>Parner Login</li> 
        <li>SiteMap</li> 
       </ul>  
      </div> 
</div>

而且如下方式：

#navigation{ 
    height:290px;  
    background-color:olive; 
    display:block; 
    position:static; 
} 
#navBar { 
    height: 33px; 
    width: 100%; 
} 
#navigation ul { 
    background: -moz-linear-gradient(center bottom , #FCFCFC 25%, rgba(200, 200, 200, 0.8) 50%) repeat scroll 0 0 transparent; 
    height: 32px; 
    margin: 0; 
    opacity: 0.6; 
    padding: 0; 
} 
#navigation ul li { 
    color: #302E2E; 
    display: inline; 
    font-size: 16px; 
    margin: 10px; 
    padding: 0; 
}

來源

2012-05-29 Umesh Patil

這裏是一個辦法：

http://jsfiddle.net/kKp6Z/2/

使用position: relative集裝箱股利和設置position:absolute;bottom:0;爲navBar。

來源

2012-05-29 13:18:31 Dev

您需要一個塊項目才能使用邊距。

#navigation ul li { 
    color: #302E2E; 
    display: inline-block; <------ here 
    font-size: 16px; 
    margin: 10px; 
    padding: 0; 
}

你可能要調整邊距具有比其他面不同的值，以垂直中央的文字。順便說一句，如果你正在製作一個菜單，你最好在你的LI裏面放一個鏈接，並把除了display:inline-block以外的所有東西都移動到A標籤的樣式上，並在A標籤上使用display:block。

來源

2012-05-29 13:19:52

我的解決辦法：http://jsfiddle.net/kKp6Z/1/

來源

2012-05-29 13:24:26

如果你有塊導航的準確高度，它不會改變，你可以這樣做：

#navBar { 
    height: 33px; 
    width: 100%; 
    position: relative; 
    top: Xpx; 
}

哪裏Xpx是你所需的值。

來源

2012-05-29 13:35:53 Xella

分區底部的水平列表

回答

相關問題