Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Если position absolute, а внутри margin в % - то перенос на другую строку... (https://javascript.ru/forum/xhtml-html-css/40387-esli-position-absolute-vnutri-margin-v-%25-perenos-na-druguyu-stroku.html)

Petja 03.08.2013 12:23

Если position absolute, а внутри margin в % - то перенос на другую строку...
 
Если контейнер 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>

danik.js 03.08.2013 13:48

Цитата:

Сообщение от Petja
margin-right почему-то не участвует в создании ширины (почему?)

Ну помоему очевидно почему. Для расчета ширины контейнера рассчитывается ширина содержимого. При этом встречается процентное значение, которое можно рассчитать только зная ширину контейнера. Получаем рекурсию. Чтобы избежать рекурсию расчет процентного значения откладывается. Таким образом в ширину контейнера не закладываются процентные поля.
Если бы процентные значения не игнорировались, то ширина контейнера оказалась бы равна бесконечности.

Petja 03.08.2013 19:56

Спасибо, интересно...
А есть ли какая-то возможность задать относительное расстояние между этими блоками внутри абсолютного блока?

Petja 03.08.2013 20:26

Сори, кажется понял теперь что нельзя.


Часовой пояс GMT +3, время: 04:39.