В настоящее время у меня есть пять элементов <li>
. Каждый <li>
определяется с 25% шириной:
ul li {
float: left;
width: 25%;
}
и определяется в контейнере-контейнере:
#wrapper {
position: absolute;
width: 125%;
}
Что им нужно сделать: сделать четыре первых элемента появляться на экране, занимая 100% ширину, и последний элемент float остается на экране.
Примечание: в итоге может быть больше пяти элементов.
То, что я испытываю, состоит в том, что хотя моя обложка установлена в 5x25% = 125%, последний элемент "ломается" вниз, а четвертый не показывает полностью 25% на экране.
Сценарий здесь: http://jsfiddle.net/pJNAV/1/
Поскольку у вас есть:
#wrapper {
width: 125%;
}
У вас есть 5 элементов, поэтому каждый из них будет составлять 20% от родительского элемента, поэтому
ul li {
width: 20%;
}
ul li {
float: left;
width: 20%;
}
это означает, что обертка займет 125% экрана, но элементы получат по 20% каждого из них (правильно математически). Кажется, работает на jsFiddle.
li
?<li>
на20%
, они все равно будут занимать125%
ширины,