0

2 つのラッパー div に 5 つの div があり、float left 属性を 5 つのディップに割り当てると、ラッパー div の上部とそれらの間にスペースがあるため、5 の「トップマージン」が得られます。ここに私の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%;
 }
4

2 に答える 2

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;
}
于 2013-11-08T18:23:31.560 に答える
0

要素のブラウザースタイルのデフォルトのリセット

あなたのための略語

  • { 余白: 0px; パディング: 0px; }

margin: auto はブラウザーに自動的にリセット スタイルのマージンの例を計算するよう指示しますhttp://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/

于 2013-11-08T18:21:21.103 に答える