0

Есть меню, реализованное в виде списка, элементами списка являются ссылки. Необходимо получить горизонтальную полосу, динамически расширяющуюся в зависимости от размеров окна. text-align:justify работает только с обычным текстом, с контейнерами(span,a) эффекта нет.

4
  • А при чем тут text-align, если речь идет не о тексте??? О_о 20 окт 2011 в 10:28
  • Приведите проблемный код. 20 окт 2011 в 10:33
  • Вот пример: html: <ul> <li><a href="#">ссылочка 1</a></li> <li><a href="#">еще какая-то ссылочка</a></li> <li><a href="#">другая ссылочка</a></li> <li><a href="#">и последняя</a></li> </ul> css: ul {width: 100%; list-style-type: none; } li { float: left; clear: none; }
    – AndrewWK
    20 окт 2011 в 12:50
  • Это вам в один ряд надо ставить? 20 окт 2011 в 13:16

2 ответа 2

1

Вообще вы фигней занимаетесь. Но подскажу - вам нужно хакать, примерно так

ul { display: block; list-style: none; text-align: justify; height: 30px; overflow: hidden; }
li { display: inline; line-height: 30px; padding: 0px 10px; /*минимальный отступ*/ }

и добавлять 1 li шириной заведомо больше меню без переноса

<ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
  <li><img src="любая-картинка.jpg" width="800"></li>
</ul>

Примерно так. То есть, текстовые элементы растягиваются ровно на все доступное пространство с мин. отступом 10px. Последний элемент нужен для того, чтобы 100% получилось 2 строки в итоге.

3
  • вот это работает как надо, хотя я и не понял суть этого последнего элемента.. :)
    – AndrewWK
    20 окт 2011 в 14:14
  • justify для одной строки работает как left, а если предложение выходит за край - слова растягиваются на всю строку, а 2 строчка опять работает как left.
    – Sh4dow
    20 окт 2011 в 14:19
  • так вот в чем проблема была) вот этой тонкости насчет 2 строк не знал, спасибо)
    – AndrewWK
    20 окт 2011 в 16:44
0

Делаете функцию примерно такую:

function getThisWindowWidth() {
    return screen.availWidth;
}

Она возвращает ширину экрана. На всякий случай, вот для высоты:

function getThisWindowHeight() {
    return screen.availHeight - 90;
}

Вот.
P.S. Но если будете менять ширину окна мышкой, то не подействует. Надо тогда как-то выстебнуться для слежением за изменением размеров окна.

UPD1:
Можно попробовать в CSS установить width: 100%

UPD2:
Ах ё! Сделайте в качестве примера так:

li {
    width: 30%;
    background: #00FF00;
}

И все элементы будут 30% от ширины окна.
Или, если касаться именно вашего примера, то так:

ul { } 
li { 
    width: 100%; 
    float: left; 
    clear: none; 
    list-style-type: none; 
}

UPD3:
Вот

li {
    padding-right: 20px;
    float: left;
    clear: none;
    list-style-type: none;
    background: #00FF00;
}

Фоновый цвет поставил для того, чтобы видеть точно, что получилось.

5
  • width: 30% не вариант. вы сами пробовали это? ну хорошо, задаем размер контейнеров, текст то контейнерах тоже везде раздной ширины, а значит остаток где-то будет заполнен пустотой. как результат - не равномерность.
    – AndrewWK
    20 окт 2011 в 13:19
  • Так что же в конце-то концов вам надо? Сформулируйте точно вопрос, от начала и до конца. 20 окт 2011 в 13:20
  • Исправил в первом посте. Мне важно расстояние между видимой частью этих элементов li. т.е между их текстовыми составляющими.
    – AndrewWK
    20 окт 2011 в 13:30
  • пример - bitmemory.ru Только там жестко все фиксированно, ничего не растягивается. Выглядеть должно так же, но при этом быть резиновым :)
    – AndrewWK
    20 окт 2011 в 13:36
  • Это вы про верхнее меню? Тогда ответ верен. Вот только там не используют в качестве выравнивания на одну строку свойство float: left; 20 окт 2011 в 13:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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