0

ページの中央にリストを配置する方法を教えてください。html では、テーブルを作成して、たとえばテーブル幅を 100% にして、各セクションを分割できます。しかし、私はそれを取り除き、CSS にもっと集中したいと考えています。div を作成し、リストの css は現時点では次のようになります。

.list {
        margin-left: auto;
        margin-right: auto;
        width: 6em;
        background: white;
        position: absolute;
        height: auto;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -border-radius: 10px;
        border-radius: 10px;
}

編集:私はすでに順序付けられていないリストを作成し、クラス名「リスト」の div でタグ付けしました。リストをサイトの中央に配置する方法を知りたいだけです。表現が不十分で申し訳ありません。

4

4 に答える 4

1

あなたの CSS は問題ないように見えます。単純に削除するposition: absolute;と、完全に中央に配置されます。

CSS

.list {
    margin: 0 auto;
    width: 6em;
    border: 1px solid red;
    border-radius: 10px;
}

ここでは、次のようなマージンの簡略表記を使用できますmargin: 0 auto;。これは、上下の余白が に設定され0、左右が に設定されていることを意味しautoます。

デモ

購入前にお試しください

于 2013-11-08T11:20:19.693 に答える
0

このような何かがあなたを整理するはずです: http://jsfiddle.net/hYFgp/

HTML

<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
</ul>

CSS

ul{
width: 200px;
border: 1px solid red;
margin: 0 auto;
padding: 0;
}
ul li{
text-align: center;
list-style-type: none;
}

次に、スタイルをいじって、希望どおりに見えるようにします。. .

于 2013-11-08T11:07:32.413 に答える
0

css display:table セットを調べます。http://ajaxian.com/archives/display-tableのようなもの

于 2013-11-08T11:05:20.417 に答える
0

リストを作成して<ul>cssを適用できます。これは私が最近取り組んでいるものです

例

于 2013-11-08T11:05:25.870 に答える