Если контейнер position absolute, а внутри него идут элементы float друг за другом в строчку, и если внутреннему элементу задать margin или padding (right или left) - то последний элемент съезжает на новую строку...
Получается, что внутренние элементы float создают общую ширину блока absolut (как они ее создают?), а margin-right почему-то не участвует в создании ширины (почему?) а перевешивает 100% ширину и выходит за ее рамки.
Подскажите, пожалуйста, какая логика за этим всем стоит? Что почитать?
Вот код
http://jsfiddle.net/Axjvd/5/
<ul class="mainMenu">
<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>
<li><a href="">Услуги</a></li>
<li><a href="">Продвижение</a></li>
<li><a href="">Портфолио</a></li>-->
</ul>
<style type="text/css">
.mainMenu{
height: 40px;
list-style: none;
background-color: #0f0;
position: absolute; /* Если position = absolute */
}
li{
float: left;
margin-right: 4%; /* Из-за него переносится на другую строку */
/*padding-right: 4%; Так тоже самое будет */
}
a{
display: block;
height: 31px;
padding: 9px 10px 0;
}
</style>
