Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Какая тема Вас интересует больше?

Программирование на Python для начинающих

Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

Другие курсы

11 шагов к созданию своей Web-студии

После семинара:

- Вы узнаете главное отличие богатых от бедных.

- Вы увидите разоблачения множества мифов об успешности и о бизнесе.

- Вы получите свой личный финансовый план прямо на семинаре.

- Мы разберём 11 шагов к созданию своей успешной Web-студии.

- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.

Записаться

Другие курсы

Если не можешь изменить обстоятельства, попробуй изменить свое отношение к ним.

Джордж Бернард Шоу

Форум сайта MyRusakov.ru

16.11.2013 12:43:16 Горизонтальный список Сообщение #1

th3107

Новичок

Дата регистрации:
19.07.2013 11:33:58

Сообщений: 4

Здравствуйте.Подскажите пожалуйста как можно сделать горизонтальный список на всю ширину(страницу)?

Профиль

16.11.2013 12:57:07 Горизонтальный список Сообщение #2

alexandrdante

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

Доброго Вам времени суток.

Просто заключите список в тег блока <div> или же создайте для него ячейку таблицы и растяните на всю ширину экрана при помощи параметра стилей width:100%;

Профиль

16.11.2013 13:14:18 Горизонтальный список Сообщение #3

th3107

Новичок

Дата регистрации:
19.07.2013 11:33:58

Сообщений: 4

<div id="menu">
<ul>
<li class="active">
<a href="#">
<span>
WEB PROFESSIONALS
</span>
</a>
</li>
<li>
<a href="#">
<span>
BUSINESS
</span>
</a>
</li>

______________________________________
#menu ul li {
float:left;
list-style:none;
text-align:justify;
}

#menu ul li a {
text-decoration:none;
padding:11px;
display:block;
color:#9c9c9c;
background-color:#2c2c2c;
}

#menu ul {
margin:0;
}

#menu ul li.active a , #menu ul li a:hover {
background-color:#111111;
}

количество пунктов 8.width:100% делаю не помогает.

Профиль

16.11.2013 13:30:54 Горизонтальный список Сообщение #4

alexandrdante

Модератор

Дата регистрации:
15.11.2013 15:33:40

Сообщений: 207

<nav> 
<ol id="nav"> 
<li><a href="#">Главная</a></li> 
<li><a href="#">Собираем</a></li> 
<li><a href="#">Без цензуры</a></li> 
<li><a href="#">Учимся</a></li> 
<li><a href="#">Справочники</a></li> 
<li><a href="#">Справочники</a></li> 
<li><a href="#">Справочники</a></li> 
 
</ol> 
</nav>

ну и стили для правильного размещения.

<style type="text/css"> 
ol { 
 display: table-row; /* эмуляция строки таблицы */ 
} 
li { 
 width: auto; /* чтобы поведение было аналогичным ячейки таблицы */ 
 display: table-cell; /* эмуляция ячейки таблицы */ 
 text-align: center; 
 height: 50px; /* высота пункта */ 
 padding-left: 2px; /* визуальная граница между пунктами меню */ 
 vertical-align: bottom; /* это нужно для случаев, когда в пункте меню текста больше чем на одну строку */ 
} 
li:first-child { 
 padding: 0; /* у первого элемента убираем отступ чтобы четко прилег к левой границе */ 
} 
a { 
 width: 1000px; /* вот это заставляет наши псевдоячейки растянуться должным образом */ 
 height: 50px; 
 display: table-cell; /* без этого тоже никак */ 
 vertical-align: middle; /* вертикальное выравнивание текста */ 
} 
</style>