Question

OK！我今天刚刚开始使用HTML和CSS，并认为通过构建一些东西而不仅仅是阅读一些文本来学习它是一种很好的方法。

所以我决定构建一个示例导航栏。

<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/

Answer 1

从float: left;的CSS定义中删除#menu。

示例

http://jsfiddle.net/Y8AAH/3/

#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;
}

http://jsfiddle.net/Y8AAH/5/

Answer 2

我建议您在继续之前阅读this。看来你真的不知道自己在做什么，所以在问问题之前先学习= p

建立我的第一个导航栏？

2 个答案:

示例

#menu

使用居中菜单更新了样本