Макет сетки списка с процентной шириной с процентным левым полем на ‹li› и отрицательным процентным левым полем на ‹ul›

Длинное название, извините.

Обычно, когда я делаю макеты сетки с использованием списков, у меня есть фиксированная ширина для <li> и <ul>. Затем у меня есть левое поле на <li>, которое я затем помещаю как отрицательное левое поле на контейнере <ul>, таким образом натягивая все это обратно и идеально выстраиваясь.

Но я не могу заставить это работать с процентами, и я этого не понимаю. Думаю, я упускаю что-то очевидное. Должно уместиться 3 предмета в одну линию!

Каждый li равен 32%, а три в ряду составляют 96%, затем левое поле в 2% составляет 102%, затем отрицательное поле слева на ul, равное -2%, чтобы снова уравновесить ситуацию.

Немного HTML

<div class="container">
    <div class="row">
        <ul>
            <li><div class="inner">Item 1</div></li>
            <li><div class="inner">Item 1</div></li>
            <li><div class="inner">Item 1</div></li>
        </ul>
    </div>
</div>

Немного CSS

.container {
    padding: 30px;
}
.row {
    width: 100%;
    overflow: hidden;
}
ul {
    margin: 0 0 0 -2%;
    padding: 0;
    overflow: hidden;
}
li {
    width: 32%;
    float: left;
    margin: 0 0 0 2%;
    list-style: none;
}
.inner {
    border: 1px solid #ccc;
    padding: 10px;
}

И нахальная скрипка

http://jsfiddle.net/davidpauljunior/6DEv9/

Еще одна скрипка здесь, чтобы показать, как это работает с ПИКСЕЛЯМИ и отрицательными полями. Цель состоит в том, чтобы 3 элемента идеально вписывались в линию. http://jsfiddle.net/davidpauljunior/6DEv9/5/


css percentage grid-layout
person davidpauljunior    schedule 25.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема вызвана тем, что ширина LI - это процент от родительского элемента (в данном случае UL), но проблема в том, что когда вы устанавливаете отрицательный запас на родительский элемент (в данном случае -2%), делает родительский элемент 102%, но ваши вычисления все еще исходят из родительского элемента, равного 100%, что оставляет пробел. Единственный способ сделать это и получить идеальное соответствие - это не иметь отрицательного поля UL, но затем удалить поле первого LI с помощью селектора ": first-child", такого как this jsFiddle и приведенный ниже код.

ul {
    background-color: red;
    list-style: none outside none;
    overflow: hidden;
    padding: 6px 0;
}
li {
    background-color: #FFF;
    float: left;
    margin-left: 2%;
    width: 32%
}
li:first-child {
    margin-left: 0;
}

Надеюсь, что это поможет,
-Илия

person ElijahFowler    schedule 25.07.2013
comment
Хорошо получить подтверждение по этому поводу. «Строка-жидкость» Bootstrap использует эту концепцию, и вы быстро сталкиваетесь с необходимостью li:nth-child(3n + 4) { margin-left: 0; }. К сожалению, это, в свою очередь, вызывает у меня проблемы в более сложном случае, когда у меня есть некоторые скрытые <li> элементы. Ну да ладно, нет простого пути. - person davidpauljunior; 25.07.2013

arrow_upward
0
arrow_downward

вы пытаетесь указать ширину в%, и ширина каждого элемента составляет 32%, что становится 32 * 3, становится 96%, а с отступом 2% для каждого элемента оно становится общим 102%, а ширина ur составляет 100%, и текущий список всегда будет ширина в соответствии с шириной вашего контейнера, независимо от того, используете ли вы маржу или нет, вы должны разделить ширину контейнера на общий элемент списка, в том числе с полем http://jsfiddle.net/6DEv9/2/

использовать этот

li {
    width: 31%;
    float: left;
    margin: 0 0 0 2%;
    list-style: none;
}
person Hushme    schedule 25.07.2013
comment
В своем вопросе я сказал, что расчет был 102%, поэтому я дал отрицательную маржу контейнеру ul. Вы только что уменьшили ширину, и теперь они не подходят заподлицо с контейнером. Вот пример работы с пикселями. Обратите внимание на отрицательные поля и на то, как идеально выровнять список с родительским контейнером http://jsfiddle.net/davidpauljunior/6DEv9/5/ - person davidpauljunior; 25.07.2013
comment
Я сказал вам в своем ответе, что список будет вести себя в соответствии с шириной контейнера, а не с полем - person Hushme; 25.07.2013
comment
Хорошо, но я не думаю, что ответ состоит в том, чтобы делать элементы меньше, чтобы они на самом деле не соответствовали разметке макета. - person davidpauljunior; 25.07.2013
comment
дорогие они будут выровнены в соответствии с внутренней шириной контейнера, ничего общего с полем контейнера - person Hushme; 25.07.2013