1

まず、これは私のHTMLです 

<div class="header">
  <div class="wrapper">
    <div class="navi">
      <a href="#" class="logo">Logo</a>
      <ul><!--
        --><li><a href="#" class="navlink">Link 1</a></li><!--
        --><li><a href="#" class="navlink">Link 2</a></li><!--
      --></ul>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
</div>

とCSS 

.wrapper {
    width: 90%;
    max-width: 50em;
    margin: 0 auto;
}

.header,
.navi {
    width: 100%;
}

.header {
    background: grey;
}

.navi {
    background: green;
    display: table;
    text-align: center;
}

.navi ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.navi li {
    background: orange;
    display: inline;
    margin-left: 10px;
}

.navilink {
    display: inline-block;
    width: auto;
}

.logo {
    background: red;
    float: left;
}

.content {
    width: 100%;
    background: fuchsia;
}

フィドル
フルスクリーン フィドル

ご覧のとおり、ラッパーは、コンテンツとビューポートの端の間に常に何らかのギャップがあり、特定のポイント (50 em)を超えると.wrapper、それ以上は超えないようにします。

<div class="wrapper">ここに投稿したコードは機能しますが、同じ結果を達成する可能性があるかどうかを知りたいです。クラスを要素に直接適用しようとしました.wrapperが、うまくいきません。なぜですか?

明確にするために：私の目的は、マークアップをよりきれいにすることです。そのため、ソリューションに興味があり、投稿した例のように要素が動作するようにしますが、<div class="wrapper">. .wrapperもちろん、クラスは維持する必要がありdivます。それは私を驚かせただけです。.wrapperそのため、要素に直接追加しようとしました。

4

1 に答える 1

1

ラッパー div を削除し、2 つの CSS プロパティをコンテンツ div に追加します。

.content { 
margin: 0 auto;
max-width: 50em;
}
于 2013-02-07T16:21:05.597 に答える