html - CSS:对象向左浮动，不重叠

Question

我正在创建一个导航栏，我想让按钮在同一个导航栏中， float 到导航栏 div 内的左侧，它只覆盖页面宽度的 75%，并且位于中间。

我在 HTML/CSS 方面的知识:

<div id="header">
            <div id="navbar">
                <div id="navbar-left">
                    <div id="navbar-button1" class="navbar-button">
                        <div class="navbar-button-text">Page1</div>
                    </div>
                    <div id="navbar-button2" class="navbar-button">
                        <div class="navbar-button-text">Page2</div>
                            <div class="navbar-dropdown">
                                <div class="navbar-dropdown-button">Page2</div>
                                <div class="navbar-dropdown-button">SPage2</div>
                                <div class="navbar-dropdown-button">SPage3</div>
                                <div class="navbar-dropdown-button">SPage4</div>
                            </div>
                    </div>
                    <div id="navbar-button3" class="navbar-button">
                        <div class="navbar-button-text">Page3</div>
                    </div>
                </div>
                <div id="navbar-right"></div>
            </div>
        </div>

body {
    background-color: #E5E5E5;
    margin: 0em;
    width: 100%;
    height: 100%;
}

#main {
    background-color: #E3E3E3;
    width: 75%;
    margin: auto;
    height: 100%;
    top: 0;
    position: absolute;
    left: 12.5%;
}

#header{
    background-color: #66CDAA;
    height: 3em;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 998;
}

#navbar{
    background-color: #66CDAA;
    height: 3em;
    width: 75%;
    top: 0;
    position: fixed;
    z-index: 999;
}

.right{
    border-left: 0.1em solid #E5E5E5;
    height: 100%;
    width: 25%;
    float: right;
    z-index: 3;
}

#footer{
    height: 5em;
    clear: both;
    z-index: 3;
}

.navbar-button{
    height: 3em;
    line-height: 3em;
    width: 25%;
    z-index: 1;
    position: fixed;
}

.navbar-button-text{
    text-align: center;
    font-size: 1.3em;
    font-family: 'bebas_neueregular';
    color: #E3E3E3;
    font-weight: bold;
}

.navbar-dropdown-button{
    text-align: center;
    font-size: 1.3em;
    font-family: 'bebas_neueregular';
    color: #E5E5E5;
    font-weight: bold;
}

.navbar-dropdown{
    position: absolute;
    top:0%;
    width:100%;
    background-color: #57a58a;
    opacity: 0;
}

#navbar-button1{
    left: 12.5%;
    float: left;
}
#navbar-button1:hover{
    background-color: #57a58a;
}

#navbar-button2{
    left: 37.5%;
}

#navbar-button2:hover .navbar-dropdown{
    opacity: 1;
}

#navbar-button3{
    left: 62.5%;

}

#navbar-button3:hover{
    background-color: #57a58a;
}

解释说:

• 我有一个 DIV(main) 覆盖了 75% 的宽度和 100% 的高度页面。
• 我在 DIV(main) 中有一个 DIV(header)，它覆盖相同的宽度，但只有页面高度的 3em。
• 我有两个 DIV(navbar-left 和 navbar-right)目前还没有尺寸。
• 我在一个 DIV(navbar-left) 中有三个 DIV(navbar-button1、navbar-button2 和 navbar-button3)，每个占页面宽度的 1/4。

我想要的:

• 我希望三个 DIV(navbar-button1、navbar-button2 和 navbar-button3) float 到 DIV(navbar-left)内部的左侧。

这样做时出现的两个问题:

• 它们没有漂浮在 div 内部，而是一直漂浮到页面左侧。
• 它们不是一个接一个地漂浮，而是漂浮在另一个之上。

你能帮我吗？

谢谢

Answer 1

据我所知，在您的 CSS 中您有:

#navbar-button1 {
    left: 12.5%;
    float: left;
}

#navbar-button2 {
    left: 37.5%;
} 

#navbar-button3 {
    left: 62.5%;
} 

这将使 navbar-button1 向左浮动，但其他两个不会 float 。通过 navbar-button 类使每个都有 float: left; 属性。这将使它们按照您的意愿并排站立。

#header{
    background-color: #66CDAA;
    height: 3em;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 998;
}

#navbar{
    background-color: #66CDAA;
    height: 3em;
    width: 75%;
    top: 0;
    position: fixed;
    z-index: 999;
}

按钮似乎位于整个页面的左侧，因为您根本没有居中或移动导航栏 div。它们实际上漂浮在 div 内部，但标题和导航栏 div 位于同一个位置。