Сделайте так, чтобы пять оставшихся плавающих элементов шириной 25% продолжали плавать за кадром

Question

Сделайте так, чтобы пять оставшихся плавающих элементов шириной 25% продолжали плавать за кадром

0

В настоящее время у меня есть пять элементов <li>. Каждый <li> определяется с 25% шириной:

ul li {
    float: left;
    width: 25%;
}

и определяется в контейнере-контейнере:

#wrapper {
    position: absolute;
    width: 125%;
}

Что им нужно сделать: сделать четыре первых элемента появляться на экране, занимая 100% ширину, и последний элемент float остается на экране.

Примечание: в итоге может быть больше пяти элементов.

То, что я испытываю, состоит в том, что хотя моя обложка установлена в 5x25% = 125%, последний элемент "ломается" вниз, а четвертый не показывает полностью 25% на экране.

Сценарий здесь: http://jsfiddle.net/pJNAV/1/

user1231561 18 фев. 2014, в 18:02

Источник

0

У вас есть какие-либо поля / отступы / границы, определенные для ваших элементов li ?
Aleks G 18 фев. 2014, в 16:36
0

Установите ширину <li> на 20% , они все равно будут занимать 125% ширины,
Nick R 18 фев. 2014, в 16:41

Теги:

javascript

html

css

2 ответа

0

ul li {
    float: left;
    width: 20%;
}

это означает, что обертка займет 125% экрана, но элементы получат по 20% каждого из них (правильно математически). Кажется, работает на jsFiddle.

Mackan 18 фев. 2014, в 14:07

Ещё вопросы

У вас есть какие-либо поля / отступы / границы, определенные для ваших элементов li ?
Установите ширину <li> на 20% , они все равно будут занимать 125% ширины,

ojovirtual · Accepted Answer · 2014-02-18T15-01-00.000Z

Поскольку у вас есть:

#wrapper {
width: 125%;
}

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

ul li {        
    width: 20%;        
}

http://jsfiddle.net/pJNAV/2/