Question

我正在建立一个网站，我希望Navbar跨越整个页面。我该怎么做？我认为这种方式可以在ul.navbar a元素的某个地方。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>

<body>

<div id="container">
<div id="body">
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="biography.html">Biography</a></li>
    </ul>
    </center>
</div>    
</div>
</body>
</html>

CSS：

@charset "utf-8";


#container {
    margin-left:auto;
    margin-right:auto;
    width:960px;
    background-color:#666666;
}

#body {
    background-color:#666666;
    width:960px;
    height:500px;
    border:2px solid #FFFFFF;
    margin-top:50px auto;
}

.navbar {
    position:relative;
    list-style:none;
    border-bottom:none;
    float:left;
}

ul.navbar li {
    float:left;
}

ul.navbar a {
    background-color:#66FF33;

    margin:0px;
    padding:5px;
    text-decoration:none;
    color:#
}

ul.navbar a:hover {
    width:8em;
    margin:0px;
    background-color:#33FFD7;
    padding:5px;
}

body {
    background-color:#333333;
}

Answer 1

http://jsfiddle.net/4s6wn/

在这里，我做了你想要的小提琴。您可以在float:left

上使用li然后display:inline-block，而无需在text-align:center上使用.navbar

我还将绿色背景颜色放在.navbar上。

如果您希望在页面范围内使扭结相等，请将width: 19%添加到ul.navbar li。如果您添加额外的链接，则必须进行调整。

如果您发现a太小，请http://jsfiddle.net/u4se9/查看display:block;width:100%;代码是否有ul.navbar a:hover。

在http://jsfiddle.net/pdvhD/中，我居中固定了左边的填充物。

如何让我的水平导航栏跨越整个宽度？

1 个答案: