Как растянуть меню на всю ширину

05.06.2013
Нужно было растянуть меню по ширине экрана и сделать все пункты равноудаленными.

Вот пример самого упрощенного работающего кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE HTML>
<html>
<head>

<style>
ul
{
    border                : solid 1px red;
    text-align            : justify;
}

li
{
    border                 : solid 1px green;
    display                : inline;
}

#strut
{
    display                : inline-block;
    width                : 100%;
    border                : solid 1px aqua;
}

</style>

</head>

<body>

<ul>
    <li> Test 1 </li>
    <li> Test 2 </li>
    <li> Test 3 </li>
    <li> Test 4 </li>
    <li> Test 5 </li>
    <div id="strut"></div>
</ul>


</body>
</html>

Должно получиться похожим на:

pic1

Только мой пример, без дополнительного стилевого оформления смотрится некрасиво, но сама идея работает.

Полезная статья, но без примеров кода.

Категории: HTML, CSS
Яндекс.Метрика