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