CSS - каждый элемент в горизонтальном списке должен иметь равную долю доступного заполнения. - PullRequest
Новая
       23

CSS - каждый элемент в горизонтальном списке должен иметь равную долю доступного заполнения.

2 голосов
/ 18 декабря 2010

Рассмотрим простую компоновку CSS, где содержащая оболочка div определяет фиксированную ширину около 900 пикселей, поэтому все внутри нее расширяется до 100% ширины.

Здесь у меня есть навигационный div, содержащий 1 UL и 6 элементов списка, с плавающей точкой слева, чтобы они появлялись в горизонтальной линии.

Каждый элемент списка должен варьироваться, чтобы точно соответствовать его текстовому содержимому, но интервал между каждым элементом должен быть разделен так, чтобы все меню вписывалось в пространство на 100%, например: 

------------------------------------------------------
-N-        -N-          -N-               -N-      -N-
- -        - -          - -               - -      - -
- -ITEM1111- -ITEM222222- -ITEM33333333333- -ITEM44- -   
- -        - -          - -               - -      - -
------------------------------------------------------
<-------------------- 100% -------------------------->

Надеюсь, это иллюстративно! «N» является постоянным, но увеличивается соответственно до 100% ширины (т.е. для доступности - кто-то увеличивает размер шрифта).

Рад принять альтернативные предложения, хотя я стремлюсь не для JavaScript или изображений, просто чистота CSS.

Ответы [ 4 ]

6 голосов
/ 29 октября 2012

Вот мое простое решение для этого на основе CSS3 Flexible Box Layout :

Styles 

ul {
    padding: 0;
    width: 100%;
}

ul li {
    list-style: none;
    text-align: center;
    border: 1px solid Gray;
}

.flexmenu {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

.flexmenu li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    flex-basis: auto;
}

HTML 

<div style="width:900px">
    <ul class="flexmenu">
        <li>short</li>
        <li>looooooooooooooooooooooooooooooong</li>
        <li>short</li>
        <li>short</li>
    </ul>
</div>

Результат

enter image description here

4 голосов
/ 18 декабря 2010

Если совместимость с IE6 / IE7 не критична для вас, эта раскладка тривиальна с использованием дисплея: таблица

http://jsfiddle.net/5SFG5/

3 голосов
/ 18 декабря 2010

Проблема в том, что когда элемент является плавающим, его ширина уменьшается до фактической ширины содержимого.Вы можете поиграть с этим, используя Javascript (я знаю, что вы запросили версию без JS, но я не могу придумать другой вариант).В jQuery это должно быть довольно просто.Учитывая эту структуру: 

<ul id="nav">
  <li>ITEM1</li>
  <li>ITEM2</li>
  <li>ITEM3</li>
</ul>

вы можете сделать что-то вроде этого: 

var width = 0, maxwidth = 900;
$('#nav li').each(function(){
  width += $(this).width();
});
var count = 2 * $('#nav').size();
var margin = (maxwidth - width) / count;
$('#nav li').css({
  marginLeft: margin + 'px',
  marginRight: margin + 'px'
});

Извините за грязный код, я немного спешу: D.В любом случае, то, что вы делаете, в основном: проверьте общую ширину, занятую элементами li, проверьте, сколько свободных мест и заполните ее полями li.

0 голосов
/ 18 декабря 2010

Я не уверен, как N может быть как постоянной, так и переменной шириной.

Вот начало ..

CSS 

#nav { width: 100%; display: inline; }
#nav ul li {
                display: block;
                float: left;
                margin: 2%;
                width: 10%;
            }

 #nav ul li a {margin: 0 auto; display: block;}

HTML 

<div id="nav">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
         </ul>
</nav>
...