Question

我意识到这里已经有很多关于这个问题的材料，但是我仍然无法并排放置三个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;
}

Answer 1

按以下方式更改您的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;
}

Answer 2

使用CSS left property，left属性设置元素的左边缘，试试这段代码：

<强> Fiddle ：

CSS：

 #menutab
    {
    left:100px;
    }
    #storytab
    {
    left:250px;
    }
    #contacttab
    {
     left:400px;
    }

Answer 3

Position:fixed;是您遇到问题的原因

相应地更改CSS。

Answer 4

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

Demo

Answer 5

你的css需要小改变

在这个

里面

div.navbar{

   Remove position:fixed;

}

工作正常

CSS并排划分

5 个答案: