Переполнение CSS: список в div

Question

У меня есть галерея изображений, и я не хочу давать дополнительный класс третьему элементу списка:

   <div class="row">
        <ul class="rowUl">
            <li>ssss</li>
            <li>ssss</li>
            <li>ssss</li>
        </ul>
    </div>

и css

.row {
    width: 620px;
    clear: both;
    overflow: hidden;
}

.rowUl {
    width: 645px;
    float: left;
}

.rowUl li {
    width: 220px;
    float: left;
}

но третий элемент списка упал в другой строке. Как я могу решить это без лишних занятий?

Answer 1

220 * 3 = 660,

rowUL = 645

это 15 дополнительных пикселей, толкающих плавающий элемент div вниз.

Решения:

Сделать ширину rowUL 660, сделать ширину строки 660

OR

сделать строку UL li шириной 215

Answer 2

Вы превысили ширина ограничение количества встроенных элементов на 645 пикселей в пределах 660 пикселей (каждое 220 пикселей для всех трех элементов)

Вы можете сделать это, увеличив ширину внешних элементов более чем 660px

Надеюсь, это поможет
Myra

Answer 3

У вас есть 3 плавающих элемента LI, каждый шириной 220 пикселей. 3 * 220 = 660, но ширина содержащего элемента составляет всего 645 пикселей, поэтому третий элемент не может поместиться рядом со вторым и попадает в другой ряд ниже первого. Если вы хотите, чтобы все они были в одном ряду, установите ширину .rowUl равной 660px.

Кроме того, я не знаю, используете ли вы какой-либо сброс CSS - если вы этого не сделаете, помните о том, что поля по умолчанию и отступы элементов UL и LI также могут влиять на это. Вам нужно установить их в 0, если вы хотите убедиться, что они этого не делают.

Answer 4

Попробуйте увеличить width с 645px до большего значения в .rowUl, если это возможно в вашем случае.