0

私は 3 つの li アイテムを持っています - それぞれの幅は 33.3% です。margin-rightそれぞれの間にギャップを作成しようとしています<li>が、余分なマージンにより合計<li>幅が 100% を超え、新しい行で分割されます。

ボーダーボックスのアプローチでこれを並べ替えることができますか? それをグローバルに適用しようとしましたが、うまくいきませんでした。

http://codepen.io/anon/pen/jbazaN

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 33.3%;
  margin: 0 20px 0 0;
  background: blue;
}
4

2 に答える 2

1

Calc 関数が必要です 

ul li {
    float: left;
    width: calc(33.3% - 20px);/*add this*/
    margin: 0 20px 0 0;
    background: blue;
}

はい、どうぞ

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

プレフィックスを追加するか、lea verou の prefixfreeを使用することを検討してください。

アップデート：

順序付けられていないリスト内の 3 つおきのリスト項目のマージンを削除するには、notおよびn 番目のセレクターが必要ですul li:not(:nth-child(3n+3))

ul li {
  float: left;
  width: 33.3%;
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0;}

ライブデモ

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

またはそれを書いてから上書きして、このような not セレクターを回避します

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
ul li:nth-child(3n+3){margin: 0 0px 0 0}
于 2015-10-18T11:39:17.873 に答える
0

IE8 のような古いブラウザーをサポートしたい場合は、この方法を少し計算して使用できます。

あなたの場合、3 つのアイテムがあり、合計 40px である最初の 2 つのアイテムに右 20px のマージンを追加する必要があります。

この値をコンテナーから差し引き ( 660px になります)、アイテムの数で割ります。

(660/3 = 220px) 各アイテムの幅。最後のステップでは、アイテムの幅 = 新しいアイテムの幅 / 古いコンテナーの幅 [ 220/700 = .314286 ( 31.429% ) ] のパーセンテージを取得する必要があります。

最後に、クラスを追加するか、これを使用して、最後の項目からマージンを削除します

ul li + li + li { margin-right: 0 }IE8以下は最後の子セレクターをサポートしていないため

最後に、コードは次のようになります。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 0px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 31.429%;
  margin: 0 20px 0 0;
  background: blue;
}

ul li+li+li {
  margin-right:0
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

参照: IE8の nth、最初の子、および最後の子の代替、使用できますか

于 2015-12-18T17:59:45.193 に答える