Css центрирование странное поведение

Question

Я пытаюсь создать форму на экране. Я использую абсолютный элемент с левым и верхним набором на 50% и перемещаю его обратно в центр с помощью преобразования css. Пока что так хорошо, но когда я увеличиваю левую до 90%, элементы формы попадают под. Я бы ожидал, что они просто перейдут за пределы порта просмотра.

.center { 
    padding: 30px; 
    position: absolute; 
    top: 50%; 
    left: 90%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Вот эффект я не understand

Если кто-то может объяснить мне, почему тот элемент идти друг под другом? Даже если они находятся внутри абсолютного элемента. Чтобы добавить больше wierdness, если значение «left» будет отрицательным, элементы просто выходят из порта с видом сбоку? Я знаю, что

white-space:nowrap; 

будет делать трюк, но почему?

Заранее спасибо

Answer 1

Как было отмечено в комментариях, это поведение связано с inline-block элементами уровня, но он также должен сделать с вашим position: absolute; правило, в отношении вашей конкретной ситуации.

Как вы можете видеть в demo когда inline-block блочные элементы начинают достигать внешние границы видового экрана, воли wrap или collapse; это связано с характером свойства display.

Есть несколько способов борьбы с этим:

• Как вы упомянули white-space: nowrap один
• Как Габи упоминалась в своем комментарии, давая элементу значение width будет исправить это, а также - DEMO
• Изменение вашего position к relative также будет исправить это - DEMO

Реальная причина вы столкнулись с этой проблемой, потому что ваш .center элемента который делает имеетdisplay: block, теряет это унаследовать width: 100%, потому что он имеет position: absolute; или же говоря, теряет свой статус в качестве элемента block уровня.