Разрыв между отзывчивыми кнопками css
Мне нужно сделать кнопки категорий 50% отзывчивыми (или одинаковой ширины, отзывчивыми и центрированными), всегда две в одной строке.
ПРОБЛЕМА
Выглядит легко, но сложно, как мне сделать белый промежуток в 20 пикселей посередине?
div{
margin: 0 auto;
max-width:400px;
}
.gifsMainCategories{
list-style:none;
font-size:0;
margin:10px auto;
padding:0;
text-align:center;
width:100%;
}
.gifsMainCategories li{
display:inline-block;
width:50%; font-size:16px;
height:60px;
line-height:60px;
background:red;
margin:10px auto;
}
.gifsMainCategories li:nth-child(2n+1) {
background: #17bf63;
}
.gifsMainCategories li:nth-child(2n+2) {
background: #794bc4;
}<div>
<ul class = "gifsMainCategories">
<li>Dance</li>
<li>shame</li>
<li>love</li>
<li>anger</li>
<li>scare</li>
<li>shocking</li>
<li>claps</li>
<li>sad</li>
<li>well done</li>
<li>Win</li>
<li>really?</li>
<li>I dont know...</li>
<li>Dream</li>
<li>Boring</li>
<li>Slap</li>
<li>Oops...</li>
</ul>
</div>
Ответы 3
Вы можете сделать это для этого, используя
* {
box-sizing: border-box;
}
div{
margin: 0 auto;
max-width:400px;
}
* {
box-sizing: border-box;
}
.gifsMainCategories{
list-style:none;
font-size:0;
margin:10px auto;
padding:0;
text-align:center;
width:100%;
}
.gifsMainCategories li{
width:50%; font-size:16px;
height:60px;
line-height:60px;
margin:10px auto;
padding:0px 10px 0px 0px;
float:left;
}
.gifsMainCategories li:nth-child(2n){
padding:0px 0px 0px 10px;
}
.gifsMainCategories li div{
font-size:16px;
width:100%;
height:60px;
line-height:60px;
background:red;
}<div>
<ul class = "gifsMainCategories">
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
<li><div>Dance</div></li>
<li><div>shame</div></li>
</ul>
</div>вы можете присвоить класс 2-му, 4-му .. li вместо .gifsMainCategories li: nth-child (2n) it.
Вы можете добиться результата, просто изменив ширину, чтобы отрегулировать расстояние между двумя кнопками, используя метод calc () для элемента li. Попробуйте этот код.
.gifsMainCategories li{
display:inline-block;
width:40%;
font-size:16px;
height:60px;
line-height:60px;
background:red;
margin:10px;
}
Я избегаю упоминания о том, что не использую calc(). У меня уже были проблемы с использованием этого параметра.
нет другого пути? простой CSS
Если вам не нужно, чтобы они составляли ровно 50%, вы можете сделать их примерно по 40% каждый и иметь поля слева и справа. Таким образом будет достаточно места для промежутка между ними.
да, я думаю, что к настоящему времени это должны быть настройки css. работает нормально. не стесняйтесь редактировать свой ответ, чтобы отметить его. Спасибо
Поскольку OP хочет избежать calc, решение widtha, использующее flex и свойство border для имитации полей, может быть:
.gifsMainCategories{
list-style:none;
padding:0;
text-align:center;
width:100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.gifsMainCategories li{
box-sizing: inherit;
font-size:16px;
height:60px;
width: 50%;
border: 5px solid white;
line-height: 60px;
}
Также добавлен box-sizing: border-box;, я не знаю, установлен ли он для всего в вашем оригинальном css
Я использовал
.gifsMainCategories li:nth-child(2n){background-colorв своем примере, потому что в случае, если этот параметр не работает, структура контента не будет перемещаться или изменять его положение .... но в этом случае надежно ли использовать кросс-браузер? любой другой вариант, кроме этого?