html - 向左浮动导致 div 获得“边距”

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

这是你想要的？

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

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

• nav
• ul
• li

我使用的不是浮点数和边距，而是：

• display: table
• display: table-cell
• text-align: center

---

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

Answer 2

使用重置元素的浏览器样式默认值

你的速记

• {边距：0px；填充：0px；}

边距：自动告诉浏览器自动计算重置样式的边距示例http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/