CSS菜单栏-是否需要3个div？
CSS菜单栏-是否需要3个div？
提问于 2013-05-29 12:39:42
我正在为我的网站创建一个菜单栏，我想知道我这样做是否正确。
有没有更好的方法来达到同样的效果？使用3个div似乎有点过了。
下面是我目前的处理方式：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#topbar {
background: #487BC0;
width: 100%;
}
#container {
width: 960px;
margin: 0 auto;
}
#links {
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="topbar">
<div id="container">
<div id="links">Login | Register</div>
</div>
</div>
<div id="content">Content goes here</div>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-05-29 13:08:30
我不是大师，但也许这样的东西能行得通？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
background: #487BC0;
width: 100%
min-width: 960px;
margin: 0 auto;
}
#container > span {
display: block;
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<span>Login | Register</span>
</div>
<div id="content">Content goes here</div>
</body>
</html>再说一次，我不是大师。
Stack Overflow用户
发布于 2013-05-29 12:51:14
如果你不想让蓝色背景伸展，那就去掉#topbar，否则我想没问题。
对于同样的问题，
有很多解决方案。
Stack Overflow用户
发布于 2013-05-29 13:10:56
我给这只猫剥皮的方法。在我看来，宽度是很常见的，所以只需要设置一次。
HTML
<div class="container">
<div class="topBar">Login | Register</div>
<div class="content">content</div>
</div>CSS
.container
{
width:960px;
margin: 0 Auto;
}
.topBar
{
background-color:#487BC0;
text-align:right;
margin-bottom:30px;
padding: 15px 15px 15px 15px;
color: #fff;
font-size: 14px;
}
.topBar div
{
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
.content
{
background-color:#f6f6f6;
}示例：http://jsfiddle.net/V9DGp/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16805617
复制相关文章
相似问题
腾讯云开发者
