Как выравнять меню по ширине и не дать ему разъезжаться? - HTML и CSS - Страница 2

AlexKain · 28.01.2016, 14:22

Сам нашел простейшее решение. Нужно было добавить для li float:right. Пробовал и раньше, но смутило, что элементы размещаются в обратном порядке. Их нужно просто разместить в самом списке соответственно (начиная с последнего и заканчивая первым)

Цитата:

Сообщение от Naive

Ну так читай как работают проценты и от чего.

Проценты берутся от размера родителя либо (если у родителя padding) от размера, предоставляемого родителям. На самом деле не мог натянуть не из-за процентов, а потому , что не поставил для a display:block. Исправил

Цитата:

Сообщение от Naive

лютая смерть мозга. Внутри списка должны быть только элементы списка!

А собственно, в чем проблема-то? Браузеры понимают? Понимают, как сказано, они умные. Значит работает? Работает. Верстальщику удобно? Ну, думаю удобно. Что не так?

Цитата:

Сообщение от unifexx

а если без стилей попробовать?именно в хтмл это сделать?

Это как? Через таблицу? Можно пример?
Выкладываю конечный результат:

Код HTML:

<!doctype html>
<html>
<head>
<title>BMG.TJ</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name = "description" content = "Описание услуг BMG.TJ">
<style>
*{
	margin: 0;
	padding: 0;
}
body {
	font: 10px Verdana, sans-serif;
	background-color: #efefef;
}
.wrapper {
	/*margin: auto;*/
	width: 79.1%;
	margin-left: 8.1%;
	background: yellow;
	min-width: 980px;
	max-width: 1500px;
}
header {
	color: white;
}

nav ul {
	font-size: 0;
    display: table;
	background: gray;

}
nav li{
	display: inline-block;
	font: 18px verdana, sans-serif;

}
.menu{
	position: relative;
	margin-left: auto;
	width: 62.7%;

}
.menu a {
	color: white;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;	
	text-align: center;
	padding-top: 5px;		
}
.menu li {
	background: green;
	width: 19.5%;	
	height: 40px;
	border-right: 1px solid red;
	float: right;	
}
.menu li:first-child{
	border-right: none;
}
section {
	position: relative;
	border: #acacac solid 1px;
	background-color: white;
	padding: 4px;
	top: 38px;
}
.ability {
	background-color: #bc191a;
	color: white;
	padding: 1.7% 0 1.2% 2.5%;
}

.ability h1{
	font-size: 25px;
	font-style: italic;
	font-weight: bold;
	line-height: 1.5;
}

</style>
</head>
<body>
<div class="wrapper">
	<header>

		<nav>
			<ul class="menu">
			<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>				
			</ul>
		</nav>	
	</header>
		<section>
			<div class="ability">
				<h1>Добро пожаловать </h1>

			</div>
		</section>
</div>
<footer>

</footer>
</body>
</html>

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
блок с логотипом занимает по всей ширине окна а с права от него хочу сделать меню, а получается только под этим блоком	nikytt	HTML и CSS	1	27.11.2015 17:33
CSS! Гориз. резиновое меню из ul li, как его расстянуть по ширине на весь экран?	AlienNation	HTML и CSS	1	21.01.2012 01:27
Выбор пункта в меню не выполняет назначенную ему процедуру	СтуденT	Помощь студентам	2	21.12.2011 14:20
TWebBrowser-как перехватить команду скрипта для закрытия окна и не дать ему закрыться	Вовик	Компоненты Delphi	5	03.10.2007 12:17