0

わかりました、何か不足していますが、リスト項目の単純な ul リストを並べて、親 div の幅全体を広げることができないようです。ここに私の問題の例があります http://jsfiddle.net/37E55/17/。

私がやろうとしているのは、灰色のボックスを一列に並べて、最初のボックスの左端が #wrapper div の左端とインラインになり、最後のボックスの右端が #wrapper div とインラインになるようにすることです右手の端。

ボックスに絶対的な配置を与えることでボックスをうまく並べようとしましたが、不足しているマージンとパディングの組み合わせを使用する方法はありますか?

#wrapper {
 width: 400px;
 height: 300px;
 background-color:#F0F0F0;
 margin: 10px auto;    
}

.box {
 width: 92px;
 height:92px;
 background-color:#333;
 margin:0px 10px 10px 0px;
 float:left;
}

<div id="wrapper">

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

</div>​
4

4 に答える 4

1

を使用:last-childして最後のボックスを選択し、それに適用margin-right: 0します。残りの余白がスペースを適切に埋めるようにしてください。

.box {
    width: 92px;
    height:92px;
    background-color:#333;
    margin:0px 10px 10px 0px;
    float:left;
}

.box:last-child {
    margin-right: 0;
}

92px の幅に固執する必要がある場合は、それらを適切に整列させることはできません。余白が埋める必要がある残りのスペースは 32px で、これは 3 で均等に割り切れません。

于 2012-11-23T20:55:09.970 に答える
1

最初に行う必要があるのは、最後の要素の右マージンを削除することです。

.box:last-child { margin-right:0; }

それを超えて、たとえば、スペースとコンテナーのサイズに基づいて正確に均等な余白で要素を合わせることができない場合があります。場合によっては、(たとえば) 他のすべての要素に異なるマージンを適用して、レイアウトを「均一」に保ちながら、スペースの不足を処理することができます。

.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/

ただし、あなたの場合、追加のマージンが必要なボックスは 1 つだけです。たとえば、最初のボックスです。 これが私が行った方法です（見やすくするために色のコントラストを上げました）。

.box {
  width: 90px;
  height:90px;
  background-color:blue;
  margin:0px 13px 10px 0px;
  float:left;
}

.box:last-child {
    background:green;
    margin-right:0;
}

.box:first-child {
    background:yellow;
    margin-right:14px;
}

乾杯

于 2012-11-23T20:46:44.557 に答える
0

余白のあるボックスが大きすぎました。パディングは、指定されたheightandに追加されることに注意してくださいwidth。http://jsfiddle.net/37E55/32で動作することを確認してください

于 2012-11-23T20:47:04.643 に答える