3

私はdivいくつかの を含むを持っていsectionます。の 1 つに がsection含まれておりol、そのすべてliの が左にフロートされています。ol1行にできるだけ多くのsを含むように縮小し、 sを左揃えに保ちながらli水平方向に中央揃えにしようとしています。olli

ここに私が持っているものがあります: http://jsbin.com/ocokog/1/edit

<div id="wrapper">
 <section id="section">
  <ol id="list">
   <li id="i0"></li>
   <li id="i1"></li>
   <li id="i2"></li>
   <li id="i3"></li>
   <li id="i4"></li>
  </ol>
 </section>
</div>

非装飾的な CSS:

#wrapper {
  width: 85%;
  text-align: center;
}

#section {
  display: inline-block;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

#list > li {
  width: 100px;
  height: 100px;
  float: left;
}

s がすべて 1 行に収まる場合li、リストは中央に配置されます。1行が中央に配置されます

lis が 2 行目に入ると、andsectionがol成長し、全体が左揃えになります。2 つの線が中央に配置されていません

私はそれを次のようにしようとしています (利用可能な幅に応じて、section必要に応じて縮小することもできます):行数に関係なく、リスト全体を中央に配置する必要があります

幅または最大幅を設定して使用してmargin: autoもうまくいきません: http://jsbin.com/ocokog/6/edit

なぜol収縮しないのですか？どうすればこれを修正できますか?

これらの質問は似ていますが、異なります。

4

1 に答える 1

0

が中心olです。65%幅に設定しました。サイズを変更するときにオレンジ色の境界線を見ると、常に中央に配置されています。

編集

これを少し言い換えてみます。 ola がブロック要素であるのと同じようにdiv、ブロック要素です。これは、それが入っているスペースを埋めることを意味します。これは、例ではオレンジ色の境界線で表されています。あなたが望むのはol、スペースの 100% 未満を占めることです。これにはさまざまな方法がありますが、常にできるだけ多くのスペースを占めるリストから始めます。

方法の 1 つは、幅を設定することです。これの問題は、固定幅が必要ないことです。それで、パーセンテージを使用して幅を設定しようとしました。liパーセンテージが中心にならない原因となる多くの間隔があるため、これは機能しません。

別の方法は、の左右のマージンを設定することolです。これは、幅の設定と同じように機能します。

要素の中央に配置したいものを中央に配置する方法はありませんfloat:left;。. _ ol_ li問題は、それが機能しないことですol。

于 2012-12-14T21:51:28.957 に答える