我意识到这里已经有很多关于这个问题的材料,但是我仍然无法并排放置三个div而不是堆叠在一起。
<body>
<div id='boom'>
<div id='menutab' class='navbar'>
Menu
</div>
<div class='navbar' id='storytab'>
Our Story
</div>
<div class='navbar' id='contacttab'>
Contact
</div>
</div>
</body>
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div.navbar{width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:fixed;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
答案 0 :(得分:2)
按以下方式更改您的CSS
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03
/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div {
float:left;
padding-right:10px;
color:#FFF;
}
答案 1 :(得分:0)
使用CSS left property
,left属性设置元素的左边缘,试试这段代码:
<强> Fiddle 强>:
CSS:
#menutab
{
left:100px;
}
#storytab
{
left:250px;
}
#contacttab
{
left:400px;
}
答案 2 :(得分:0)
Position:fixed;
是您遇到问题的原因
相应地更改CSS
。
答案 3 :(得分:0)
<强> HTML 强>
在菜单项
周围添加了一个包装器<div id='boom'>
<div class="menu">
<div id='menutab' class='navbar'>Menu</div>
<div class='navbar' id='storytab'>Our Story</div>
<div class='navbar' id='contacttab'>Contact</div>
</div>
</div>
CSS
更改position to relative
,如果你想要它在中心,只需添加菜单css如图所示,现在菜单项将位于中心,与屏幕尺寸无关,不需要硬编码px
.menu {
width: 50%;
margin: 0 auto;
}
div.navbar {
width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:relative;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
答案 4 :(得分:0)
你的css需要小改变
在这个
里面div.navbar{
Remove position:fixed;
}
工作正常