向左浮动导致div获得“保证金”

Question

我在两个包装div中有5个div，当我将float left属性赋值给5个dips时，它们获得了5的“top-margin”，因为它们在包装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?

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

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

• 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/