好的!我今天刚开始学习 HTML 和 CSS，我认为通过构建一些东西而不是仅仅阅读一些文本来学习是一种很好的方法。
[ http://jsfiddle.net/GUkrK/ ]
所以我决定构建一个示例导航栏。
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
和CSS
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
但现在我的问题是那条水平线的定位。我是否必须通过将像素设置为绝对或相对定位来放置它？不能自动完成吗？ 为什么水平线没有覆盖浏览器的总宽度？我可以调整那条水平线的宽度吗？
编辑: 谢谢大家。这是编辑后的样本 http://jsfiddle.net/sunu0000/zdDU5/
最佳答案
从 #menu 的 CSS 定义中移除 float: left;。
示例
#menu 的 CSS
#menu {
vertical-align:middle;
display:block;
width:600px;
height:108px; /* Looks better with like: 40px !! */
}
根据您的布局，此定义可能就足够了:
#menu {
display:block;
height:108px; /* Looks better with like: 40px !! */
}
更新样本: http://jsfiddle.net/Y8AAH/4/
更新示例，菜单居中
#menu {
height:40px;
text-align: center;
}
关于html - 构建我的第一个导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8105438/