Как сделать изменяемый размер элементов li только с помощью CSS - PullRequest
Новая
       6

Как сделать изменяемый размер элементов li только с помощью CSS

1 голос
/ 18 сентября 2010

Сценарий: у меня есть неупорядоченный список ширины (скажем, 200px) с четырьмя элементами, которые имеют одинаковый размер.Поэтому каждый должен быть 50px.Когда я добавляю 5-й элемент, каждая ширина должна измениться до 40px.Если я изменю ширину на 500 пикселей с 5 элементами, каждый элемент должен быть 100 пикселей.

Это возможно только с CSS?Если да, то как это реализовано?

В настоящее время у меня есть решение, отвечающее вышеуказанным требованиям, но оно включает jQuery для изменения размера элементов на основе математических расчетов.

Спасибо за внимание.

Ответы [ 4 ]

6 голосов
/ 18 сентября 2010

Очевидно, вы можете подделать таблицы, например здесь , но я не уверен, работает ли это во всех браузерах (редактировать: это работает на winxp ie8, chrome 7, firefox). 

<div id="menu">
    <ul>
        <li>
            <a href="...">...</a>
        </li>
        <!-- other list items -->
    </ul>
</div>

#menu {
    display: table;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
}

Также пример на fiddle.net здесь

0 голосов
/ 18 сентября 2010

До тех пор, пока браузеры не реализуют функции calc(), min() и max(), это невозможно за пределами сценариев (на стороне сервера или на стороне клиента) или использования стол.

В настоящее время, что удивительно (возможно, только для меня), ни Firefox , Webkit, ни Opera не поддерживают функцию calc(), даже с различными разновидностями префикса вендора. *

Тем не менее, однажды что-то вроде следующего может работать (но не сегодня, к сожалению): 

ul {
  counter-reset: numListItems;
  width: 60%;
}

ul li {
  counter-increment: numListItems;
  width: calc(100%/numListItems);
}

Но, очевидно, чтобы , чтобы работал, браузеры должны были реализовывать некоторую форму и понимание переменных в пределах calc(), что, по-видимому, не обязательно на дороге. карта (я не уверен, что counter() совместим или предназначен для взаимодействия с calc()).

0 голосов
/ 18 сентября 2010

Использование CSS-выражений возможно, но CSS-выражения приводят к очень серьезному снижению производительности.JavaScript (и jQuery в этом отношении) является подходящим инструментом для создания желаемого эффекта.

CSS следует использовать только для стилизации, HTML следует использовать только для структуры, а JavaScript следует использовать всякий раз, когда выхочу создать динамический контент.

0 голосов
/ 18 сентября 2010

Ваш вопрос не имеет для меня никакого смысла.Если вы выключите width s, список будет настолько широким, насколько это необходимо.Но вот трещина на ваш вопрос: 

<style type="text/css"> 
ul
{
  width:500px;
}
li
{
  width:100px;
}
</style>

<ul>
  <li>1. one</li>
  <li>2. two</li>
  <li>3. three</li>
  <li>4. four</li>
  <li>5. five</li>
</ul>
...