VPF::растянуть <ul> на ширину страницы

mikhako

Дата 27.11.2006, 03:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 17.4.2006

Репутация: нет
Всего: нет

Всем привет!

Возможно ли растянуть

Код


<ul>
     <li>A</li>
     <li>B</li>
     <li>C</li>
</ul>

на всю страницу по ширине? ul отображается в строчку (display:block).

По идее, можно обойтись таблицей:

Код



<table width="100%">
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>

но нужно именно для ul.

SamDark

Дата 27.11.2006, 09:41 (ссылка)

(нет голосов)

Загрузка ...

Добрый кот

Профиль
Группа: Участник
Сообщений: 1424
Регистрация: 25.7.2006
Где: Voronezh

Репутация: 6
Всего: 38

mikhako,
Список и так растянут на всю страницу по умолчанию:

Код


<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title>123</title>
  </head>
  <style>
    ul, li{
        border: 1px solid red;
    }
  </style>
  <body>
    <ul>
     <li>A</li>
     <li>B</li>
     <li>C</li>
    </ul>
  </body>
</html>

--------------------

rmcreative.ru — Это жжж неспроста...
yiiframework.ru — О фреймворке Yii на русском.
reggi — здесь я регистрирую домены

mikhako

Дата 27.11.2006, 12:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 17.4.2006

Репутация: нет
Всего: нет

Я не совсем это имел ввиду. Я имел ввиду случай, когда ul в горизонтальную строку:

Код



<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <title>123</title>
  </head>
  <style>
    ul{
        border: 1px solid red;
        list-style:none;
    }
    li{
        border: 1px solid red;
        float: left;
    }
  </style>
  <body>
    <ul>
     <li>A</li>
     <li>B</li>
     <li>C</li>
    </ul>
  </body>

Str!pe

Дата 27.11.2006, 19:26 (ссылка)

(нет голосов)

Загрузка ...

профиль удален

Профиль
Группа: Участник
Сообщений: 2426
Регистрация: 12.6.2005
Где: На земле.

Репутация: 3
Всего: 152

mikhako,
Верстка резиновая или фиксированная?
Ты наверное хочешь что бы у тебя <li> Были растянуты так же как и <ul>? Или тебя смущает то что <UL> не до конца страницы доходит (то что есть отступ)?

--------------------

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

mikhako

Дата 27.11.2006, 19:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 17.4.2006

Репутация: нет
Всего: нет

Верстка резиновая. Количество элементов li могут меняться. Мне надо, что бы все элементы равномерно занимали строку экрана по ширине

SelenIT

Дата 27.11.2006, 19:43 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Str!pe, судя по всему имеется в виду резиновое горизонтальное меню на основе UL.

mikhako, задача была бы тривиальной... если бы IE поддерживал display:table и т.п. (тогда можно было бы обращаться со списком в точности как с таблицей). А так могу предложить более-менее кроссбраузерное решение только для случая "ячеек" равной ширины:

Код


<style type="text/css">
ul { 
   display: table;
   width: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
   table-layout: fixed; }
li { 
   display: table-cell;
   background: #ffffaa;
   width: expression(Math.floor(parentNode.offsetWidth/parentNode.childNodes.length)+'px');
}
* html li { /* только для IE */
   display: inline;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three and last</li>
</ul>

Это сообщение отредактировал(а) SelenIT - 27.11.2006, 19:44

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »