1. 首頁
  2. 問答
  3. 如何顯示css水平菜單？

如何顯示css水平菜單？

2011-06-05 102 views

回答

0

你需要這個......

display: block;

直列水平排列的所有元素。塊將一個元素放在另一個之上。我不認爲你將能夠使用display：block來佈局那一個LI元素，因爲你有一個元素和一個（或者在同一個LI元素中的那些行上的東西）

你會更好的設置對於一個LI元素的寬度屬性足夠小，它會自動勾畫出下一行而不是被自動寬度字。

來源

2011-06-05 11:02:55 bdparrish

1

我會做這樣的事情...

li#home { 
    padding: 40px 0 0 0; 
    background: url(images/home.png) no-repeat center top; 
}

你也可能需要margin-bottom: -10px將其從其兄弟姐妹移下來。

來源

2011-06-05 11:03:34 alex

1

這是我會使用的代碼。我不打算承擔你的HTML/CSS的知識，所以這裏有雲：

HTML：

<ul id="navigation"> 
    <li class="home"><a href="#" title="Home">Home</a></li> 
    <li class="car"><a href="#" title="Car">Car</a></li> 
    <li class="mobile"><a href="#" title="Mobile">Mobile</a></li> 
    <li class="old"><a href="#" title="OldThings">OldThings</a></li> 
</ul>

CSS：

#navigation { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#navigation li { 
    float: left; 
} 
#navigation li a { 
    display: block; 
    padding: 50px 20px 20px; 
}

您還需要添加您的圖像（可見在'Home'項目上） - 我建議將其作爲背景圖像放在「a」標籤上。

如果你想在「主頁」鏈接，可以在不同的級別爲別人，你可以簡單地改變「家」的階級是這樣的：

#navigation li.home a { 
    display: block; 
    padding: 60px 20px 10px; 
}

只是調整填充「a」風格，以匹配你想要的每個元素（正如我所猜測的:)）。你還必須添加顏色和懸停狀態。

祝你好運！

來源

2011-06-05 11:05:13 Kate

0

只要使用clear：right; flow：left;你的形象看例子 這裏是演示： http://3dserg.be/test/hormenu.html

這裏是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl"> 
<head> 

<style type="text/css"> 
#navcontainer 
{ 
margin: 0; 
padding: 0; 
height: 22px; 
font: 11px Verdana, sans-serif; 
width: 100%; 
border-bottom: 1px solid #bbb; 
list-style-type: none; 
background: #fff; 
} 

#navlist li 
{ 
float: left; 
margin: 0; 
padding: 0; 
width: auto; 
display: block; 
} 

#navlist li a, #navlist li a:link 
{ 
background: #fff; 
color: #555; 
text-decoration: none; 
padding: 3px 5px 3px 5px; 
display: block; 
} 

#navlist li a:hover 
{ 
color: #039; 
border-bottom: 3px solid #bbb; 
cursor: pointer; 
background: #eee; 
} 

#navlist li a#current, #navlist li a#current:link 
{ 
color: #000; 
cursor: default; 
font-weight: bold; 
border-bottom: 3px solid #999; 
} 

#navlist li a#current:hover 
{ 
border-bottom: 3px solid #f90; 
background: #eee; 
} 
#navlist li img 
{ 
clear:right; 
flow:left; 
} 
</style> 
</head> 

<body> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li id="active"><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#" id="current">Item one</a></li> 
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item two</a></li> 
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item three</a></li> 
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item four</a></li> 
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item five</a></li> 
</ul> 
</div> 
</body> 
</html>

來源

2011-06-05 11:08:46 Serg

相關問題

 相關問題