0

вот html:

.search__name {
  color: #fff;
  display: block;
  width: 20%;
  padding: 0.3em 0;
  background-color: seagreen;
  margin-bottom: 10px;
}
.search__list {
  display: flex;
  flex-wrap: wrap;
  border: 1px #00f solid;
  padding-left: 0;
  padding: 10px;
}
<ul class="search__list">
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
</ul>

как мне расставить отступы между элементами так, чтобы они были равны отступам рамки? Сейчас отступ у нижней рамки суммируется с отступом элементов. А если я сделаю margin справа от элемента, то крайний элемент сдвинется вниз, тк ширина установлена как 1/5 от ширины блока

0

1 ответ 1

2

Можно так:

.search__name {
  color: #fff;
  width: calc(20% - 10px);
  padding: 0.3em 0;
  background-color: seagreen;
  margin: 5px;
}
.search__list {
  display: flex;
  flex-wrap: wrap;
  border: 1px #00f solid;
  padding: 5px;
}
<ul class="search__list">
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
  <li class="search__name">Not Promised</li>
</ul>

3
  • такого рода calc нормально поддерживается браузерами?
    – Nikolay
    18 авг 2017 в 10:00
  • @Nikolay caniuse.com/#search=calc
    – Cheg
    18 авг 2017 в 10:00
  • @Nikolay только опера мини не понимает, но можно написать фолбек width: 19% 18 авг 2017 в 10:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.