1. 首页
  2. 问答
  3. 如何显示css水平菜单？

如何显示css水平菜单？

2011-06-05 111 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

相关问题

 相关问题