Вопрос с макетом CSS

Мне нужно отобразить следующий список с каждым тегом в li, занимающим всю ширину ul. ширина ul равна 500px;Вопрос с макетом CSS

<ul> 
<li><a href="#">Home</a>a href="#">Home</a></li> 
<li><a href="#">About us</a><a href="#">About us</a><a href="#">About us</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">FAQs</a><a href="#">FAQs</a></li> 
<li><a href="#">Contact us</a></li> 
</ul>

то есть: если Li имеет только 1 а, то ширина тега составляет 100%, если есть 3, то ширина тега составляет 33%.

Я знаю, что могу сделать li class = "has3elements" и так далее, но есть ли более чистый способ сделать это?

источник

2010-10-31 Jas

CSS:

a { display:table-cell; } 
li { display: table-row; } 
ul { display: table; }

я не могу проверить это прямо сейчас (подача от моего сотового телефона), но она должна быть достаточно легко выяснить.

источник

2010-10-31 05:11:07 pinkfloydx33

Я сомневаюсь, что он хочет стилизовать * все * свои теги A, LI и UL таким образом –

Я предпочел бы дать вмещающих ul элемент в id='navbar' и определить свойства следующим образом

#navbar {/*properties for ul*/} 
#navbar a {/*properties for a element*/} 
#navbar li (/*properties for li element*/}

Это позволит вам управлять несколькими неупорядоченных элементов списка без загромождения CSS с различными классами.

источник

2010-10-31 06:17:44 Philar

Это не поможет вам для IE, но я думал, что поделился тем, что мы можем сделать сейчас в браузерах Gecko и WebKit, и, надеюсь, очень скоро в других браузерах также с помощью модуля CSS3 Flexible Box Layout. Это довольно мощный. Вы могли бы использовать это сегодня с другой техникой по вашему выбору в качестве резерва для других браузеров.

Чтобы увидеть, как это работает, вставьте в текстовом редакторе, сохраните его и запустить его в последней версии Firefox, Chrome или Safari:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
     ul { 
     list-style: none; 
     padding: 0; 
     width: 500px; 
     background: gray; 
     } 
     li { 
     width: 500px; 
     display: -moz-box; 
     display: box; 
     -moz-box-orient: horizontal; 
     -webkit-box-orient: horizontal; 
     box-orient: horizontal; 
     } 
     li a { 
     display: block; 
     text-align: center; 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     box-flex: 1; 
     margin: 2px; 
     background: silver; 
     } 
    </style> 
    </head> 
    <body> 
    <ul> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two.one</a><a href="#">Two.two</a><a href="#">Two.three</a></li> 
     <li><a href="#">Three.one</a><a href="#">Three.two</a></li> 
    </ul> 
    </body> 
</html>

Конечный результат должен выглядеть этот скриншот из FF3.6:

A list of anchors display width Flexbox

Я писал об этом модуле CSS3, прозванный "Flexbox", в http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/. См. Также http://www.html5rocks.com/tutorials/flexbox/quick/.

источник

2010-10-31 08:11:57 stephenhay

Вопрос с макетом CSS

ответ

Смежные вопросы