Как сохранить 3 элемента li с 33,3% + margin-right в одном ряду? Border-бокс?

Question

У меня есть 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;
}

Answer 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>

подумайте о добавлении префикса или использовании prefixfree из lea verou.

Обновить:

Чтобы убрать поле в каждом третьем элементе списка внутри ваших неупорядоченных списков, вам понадобятся селекторы not и nth 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>

или напишите, а затем перезапишите, чтобы избежать не селектора, как это

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}

Answer 2

Если вы хотите поддерживать старые браузеры, такие как IE8, вы можете использовать этот метод, выполняя небольшую математику.

В вашем случае у вас есть 3 предмета, и вам нужно добавить маржу справа 20px для первых двух предметов, что в сумме составляет 40px .

Теперь вычтите это значение из контейнера (будет 660 пикселей), затем разделите его на количество элементов,

(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>

Ссылка: Альтернатива для nth, первый дочерний и последний дочерний для IE8, Могу ли я использовать