html - 向左浮动导致 div 获得 'margin'

Question

我在两个包装 div 中有 5 个 div，当我将 float left 属性分配给 5 个倾斜时，它们获得了 5 的“顶部边距”，因为它们在包装 div 的顶部和他们。这是我的 HTML 和 CSS

HTML:

<div class="headerMenuWrapper">
    <div class="menuOuterWrapper">
        <div class="menuInnerWrapper" id="menuWrapper">
            <div class="menuItem">Home</div>
            <div class="menuItem">About Us</div>
            <div class="menuItem">Products</div>
            <div class="menuItem">FAQ</div>
            <div class="menuItem">Contact Us</div>
         </div>
     </div>
</div>

CSS:

.menuOuterWrapper{
    margin: auto;
    margin-top: 0;
    width: 95%;
    height: 100%;
 }

 .menuInnerWrapper {
    margin: auto;
    margin-top: 0;
    width: 90%;
    height: 100%;
    background-color: #327CF1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 1px 1px 5px #000000;
  }

.menuItem {
    height: 100%;
    text-align: center;
    border-right: 1px solid #051625;
    float: left;
}

.headerMenuWrapper {
    margin: auto;
    width: 95%;
    height: 50%;
 }

Answer 1

Is this what you are looking for?

您的标记中有很多不应该发生的事情。

我使用以下方法为您简化了一切:

• 导航
• ul
• li

我使用的不是 float 和边距，而是:

• 显示:表格
• 显示:表格单元格
• 文本对齐:居中

---

HTML

<nav id="menu">
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Products</li>
        <li>FAQ</li>
        <li>Contact Us</li>
    </ul>
</nav>

---

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
}
#menu {
    margin: 0 auto;
    text-align: center;
}
#menu > ul {
    display: table;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 1px 1px 5px #000000;
    background: #327CF1;
    width: 100%;
}
#menu ul > li {
    display: table-cell;
    text-align: center;
    border-right: 1px solid white;
    color: white;
}
#menu > ul > li:last-child {
    border: none;
}