16.11.2013 12:43:16 Горизонтальный список Сообщение #1
th3107
Новичок
Дата регистрации:
19.07.2013 11:33:58
Сообщений: 4
Здравствуйте.Подскажите пожалуйста как можно сделать горизонтальный список на всю ширину(страницу)?
Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Зачем Вы изучаете программирование/создание сайтов?
Бесплатный курс
Пример создания сайта на Django
В этом бесплатном курсе Вы увидите пример создания полноценного сайта на Django, что даст Вам отличный старт при создании уже собственных сайтов на этом фреймворке.
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
5 шагов и профессиональный сайт готов
После семинара:
- Вы будете иметь чёткий план действий.
- Вы сможете начать создавать сайт.
- Вы сможете легко ориентироваться в информации по созданию сайтов.
Умные цитаты
Великие дела надо совершать, а не обдумывать их бесконечно.
Юлий Цезарь
Форум сайта MyRusakov.ru
Горизонтальный список
16.11.2013 12:57:07 Горизонтальный список Сообщение #2
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
Доброго Вам времени суток.
Просто заключите список в тег блока <div> или же создайте для него ячейку таблицы и растяните на всю ширину экрана при помощи параметра стилей width:100%;
Просто заключите список в тег блока <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% делаю не помогает.
<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>16.11.2013 13:50:54 Горизонтальный список Сообщение #5
th3107
Новичок
Дата регистрации:
19.07.2013 11:33:58
Сообщений: 4
Спасибо огромное,всё получилось.