16.11.2013 12:43:16 Горизонтальный список Сообщение #1
th3107
Новичок
Дата регистрации:
19.07.2013 11:33:58
Сообщений: 4
Здравствуйте.Подскажите пожалуйста как можно сделать горизонтальный список на всю ширину(страницу)?
Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Когда, совершив ошибку, не исправил её, это и называется совершить ошибку.
Конфуций
Форум сайта 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
Спасибо огромное,всё получилось.
16.11.2013 14:01:50 Горизонтальный список Сообщение #6
alexandrdante
Модератор
Дата регистрации:
15.11.2013 15:33:40
Сообщений: 207
В будущем сразу выкладывайте куски кода или хотя бы разметки,чтобы я мог дать ответ более оперативно. Благодарю