Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > растянуть <ul> на ширину страницы

Автор: mikhako 27.11.2006, 03:06

Всем привет!

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

Код


<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

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>

Автор: mikhako 27.11.2006, 12:42

Я не совсем это имел ввиду. Я имел ввиду случай, когда 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

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

Автор: mikhako 27.11.2006, 19:42

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

Автор: SelenIT 27.11.2006, 19:43

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>