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

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

html css border-box
person user1231561    schedule 18.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам понадобится функция 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}
person Gildas.Tambo    schedule 18.10.2015
comment
Ура - это довольно круто - не знал о кальции. Как мне обойтись без маржинального права на каждый третий элемент? Таким образом, маржинальное право будет применяться только к двум первым ли? - person user1231561; 18.10.2015

arrow_upward
0
arrow_downward

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

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

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

(660/3 = 220 пикселей) ширина для каждого элемента, последний шаг, который нам нужно получить в процентах от ширины элемента = ширина нового элемента / ширина старого контейнера [220/700 = 0,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 , Можно ли использовать

person Community    schedule 18.12.2015