1

html

<div class="wrapContent">
   <ul>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Lorem</li>
   </ul>
</div>

.wrapper は流動的な div です。フロートされた左側のリストをページの中央に配置しようとしています。基本的に、ul の最初と最後の li の左右の距離を同じにすることができます。

現在私は：

.wrapContent {
   width: 100%;
   margin: 0 auto;
}

.ul {
   width: 100%;
   margin: 0 auto;
}

.li {
   width: 250px;
   margin: 0 auto;
   float: left;
}
4

1 に答える 1

3

それらを浮かせないでください。(これは、質問に含める必要がある重要な詳細のようなものです... :))display代わりに使用してください。

ul {
    text-align: center;
}
li {
    display: inline-block;
    text-align: left;  /* optional */
}

これで、lis はそれぞれインライン要素のように機能しますが、コンテンツの構造を維持し、他のものと同じように中央に配置できます。

ところで、width: 100%;ブロック要素で使用する必要はありません。コンテナーの幅に合わせて自動的に拡張されます。

于 2013-02-26T23:40:31.923 に答える