1

まず、HTMLを制御できないことから始めます。これは、HTMLの外観です。

<ul class="orbit-bullets">
  <li>1</li>
  <li>2</li>
</ul>

2つ目の注意点は、を使用してもかまわないということですinline-blockが、サポートされていないブラウザーのフォールバックが必要です。

リストを中央に配置しようとしています。リストアイテムはインラインで表示する必要がありますが、幅、高さ、テキストインデントを宣言しているため、ブロック要素である必要があります。ですから、使用できることはわかっていますdisplay:block; float:left;が、要素を中央に配置したいと思います。また、リストアイテムが3つまたは4つ以上ある場合もあるので、500px未満の順序付けされていないリストに固定幅を設定したくありません。幅を500pxに設定すると、リストアイテムが2つまたは3つしかない場合、それらは中心から大きく外れて表示されます。

を使用しながら、リストアイテム自体を順序付けされていないリスト内の中央に配置する必要がありますdisplay:block; float:left;。
または、順序付けされていないリストを中央に配置したまま、幅を可変にする方法はありますか？私はどんな提案にも任せています。

ありがとう。

4

1 に答える 1

2

これを試してください-http://jsfiddle.net/jD6yp/

ul {
    width: 500px;
    text-align: center;
    background: beige;
}

li {
    display: inline-block;

    zoom: 1;          /* for old IE-s */
    *display: inline; /* for old IE-s */

    padding: 10px;
    margin: 20px;
    border: 1px solid pink;
}
于 2012-06-11T22:54:50.987 に答える