0

コンテナの幅全体に 3 つの li 要素を配置するのに苦労しています。私はレスポンシブ レイアウトに取り組んでいるので、どの要素にも固定幅を使用したくありません。ここに私のコードのフィドルがありますhttp://jsfiddle.net/vzNbr/

出力画面を拡張すると、コンテナの中央ではなく左側に配置されることに注意してください。CSS は次のとおりです。

.container {
width: 70%;
margin: 0 auto;
}

#about {
background-color: #ebebeb;
height: 100%;
width: 100%;
}

#about ul.info {
display: block;
width: 100%;
margin: 0 auto;
list-style: none;
padding: 0;
}

#about ul.info li {
width: 20%;
float: left;
display: inline-block;
vertical-align: top;
margin: 1.5em;
font-size: .8em;
}

スクリーンショット:ここに画像の説明を入力

4

6 に答える 6

1

float を失い、表示を table-cell に変更してみてください:

#about ul.info li {
width: 20%;
display: table-cell;
vertical-align: top;
margin: 1.5em;
font-size: .8em;
}

おそらくパディングなどを微調整する必要がありますが、うまくいくはずです。

于 2013-02-15T16:30:21.587 に答える
1

それが必要かどうかを確認してくださいhttp://jsfiddle.net/vzNbr/2/

見やすいように色を入れていますが、変更するだけです。

#about ul.info li {
    margin: 1.5em;
}

これに

#about ul.info li {
    margin:0 6.6666665%;
}
于 2013-02-15T16:40:23.740 に答える
1

取り出して、 atとasをfloat:left設定する必要があります。ここにあなたのデモがあります: http://jsfiddle.net/vzNbr/1/uldisplay:tablelidisplay:table-cell

于 2013-02-15T16:34:16.960 に答える
0

なぜそれが左寄りに浮いているのか完全にはわかりませんが、これが最善の解決策であるとは思えませんが、これはそれをより中央に保つようです.

    #about {
    position: relative;
}
.container {
    position: relative;
    width: 70%;
    left:20%;
    }
于 2013-02-15T16:29:04.773 に答える
0

要素を中央に配置するには、次のコード スニペットを使用します。この場合、子の合計サイズに収まるコンテナがあります。サイズがわからない場合は、firebug または chrome inspect-element で確認し、以下を使用してください。

.centered {
  position: based on your choice;
  top: 50%;
  left: 50%;
  margin-top: -(container-element_height/2);
  margin-left: -(container-element_width/2);
}

コンテナー要素のサイズが不明な場合は、レイアウトを表のように規則化する必要があります。

于 2013-02-15T16:45:48.107 に答える
0

3 つの列がある場合、それらの幅は 33.33% にする必要があります。マージンがこの 33% に余分な幅を追加しないようにするには、パディングとボックスのサイズ変更を使用できます: border-box.

http://jsfiddle.net/willemvb/n8gkK/

#about ul.info li {
    width: 33.33%;
    float: left;
    display: inline-block;
    padding: 1.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-02-15T16:37:29.423 に答える