Форум Сайтостроение Веб-строительство

Автоматическое распределение элементов в резиновом блоке.

DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
739

Имеется текстовый список (<ul>) из N элементов. Список находиться внутри резинового блока. Все элементы списка имеют фиксированную ширину. Хочу сделать так что бы в зависимости от ширины родительского блока элементы списка выстраивались внутри в N колонок, где N=ширина_блока/ширина_элемента. Как такое реализовать средствами CSS\HTML?

https://handy-tools.io (https://handy-tools.io) - Набор полезных утилит для всех!
C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

1. li float:left

Минус в том, что будет пустой место справа.

2. li display:table-cell тогда не нужно указывать ширину li

3. есть вариант с имитацией text-align:justify;

DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#2
Chukcha:
1. li float:left
Минус в том, что будет пустой место справа.

А может есть вариант выровнять всю конструкцию по центру блока? Например margin:auto?

C
На сайте с 04.02.2005
Offline
291
Chukcha
#3 

<style type="text/css">
    .menu {text-align:justify; text-align-last:justify; background:#DFDFDF; list-style-type:none; padding:0;}
    .menu li {display:inline-block; background:#BBBBBB; padding:5px 10px; cursor:pointer;}
    .menu li:hover {background:#FFFFFF;}
    .menu:after {content:""; display:inline-block; margin:0 auto; height:0; overflow:hidden;}
    .menu {margin:0 auto;}
</style>
<ul class="menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Photo</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Contacts</a></li></ul>

ps Не проверял.

LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#4
DavyJohnes:
А может есть вариант выровнять всю конструкцию по центру блока? Например margin:auto?

А к чему Вы применять собрались margin?

Не уверен, что будет работать, но можете попробовать такой вариант:


ul {
text-align: center;
}
li {
display: inline-block;
}
DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#5
LovelAss:
А к чему Вы применять собрались margin?

К ul, очевидно же.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий