CSS-вход с шириной: 100% выходит за пределы родительской привязки

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

Фрагмент JSFiddle: http://jsfiddle.net/4x2KP/

NB: Код может быть не самым чистым. Например, элемент span, который инкапсулирует текстовые входы, может вообще не понадобиться.

#mainContainer { line-height: 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; background-color: rgba(0,50,94,0.2); margin: 20px auto; display: table; -moz-border-radius: 15px; border-style: solid; border-color: rgb(40, 40, 40); border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px; border-radius: 2px; border-radius: 2px 5px / 5px; box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2); } .loginForm { width: 320px; height: 250px; padding: 10px 15px 25px 15px; overflow: hidden; } .login-fields > .login-bottom input#login-button_normal { float: right; padding: 2px 25px; cursor: pointer; margin-left: 10px; } .login-fields > .login-bottom input#login-remember { float: left; margin-right: 3px; } .spacer { padding-bottom: 10px; } /* ELEMENT OF INTEREST HERE! */ input[type=text], input[type=password] { width: 100%; height: 20px; padding: 5px 10px; background-color: rgb(215, 215, 215); line-height: 20px; font-size: 12px; color: rgb(136, 136, 136); border-radius: 2px 2px 2px 2px; border: 1px solid rgb(114, 114, 114); box-shadow: 0 1px 0 rgba(24, 24, 24,0.1); } input[type=text]:hover, input[type=password]:hover, label:hover ~ input[type=text], label:hover ~ input[type=password] { background:rgb(242, 242, 242) !important; } input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -10px 10px rgba(255,255,255,0.1); } 
  

Используйте поле определения box-sizing:border-box CSS box-sizing:border-box чтобы исключить влияние заполнения на ширину или высоту элемента. См. Документацию по box-sizing . Вы также можете проверить совместимость обозревателя с box-sizing (IE8 +).

border-box : свойства ширины и высоты include в себя прокладку и границу, но не маржу … Обратите внимание, что заполнение и граница будут внутри поля.

 input[type=text], input[type=password] { box-sizing : border-box; } 

EDIT: во время этого редактирования не требуется никаких префиксов для box-sizing . См. Файл shouldiprefix.com .

 #mainContainer { line-height: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgba(0, 50, 94, 0.2); margin: 20px auto; display: table; -moz-border-radius: 15px; border-style: solid; border-color: rgb(40, 40, 40); border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px; border-radius: 2px; border-radius: 2px 5px / 5px; box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2); } .loginForm { width: 320px; height: 250px; padding: 10px 15px 25px 15px; overflow: hidden; } .login-fields > .login-bottom input#login-button_normal { float: right; padding: 2px 25px; cursor: pointer; margin-left: 10px; } .login-fields > .login-bottom input#login-remember { float: left; margin-right: 3px; } .spacer { padding-bottom: 10px; } input[type=text], input[type=password] { width: 100%; height: 30px; padding: 5px 10px; background-color: rgb(215, 215, 215); line-height: 20px; font-size: 12px; color: rgb(136, 136, 136); border-radius: 2px 2px 2px 2px; border: 1px solid rgb(114, 114, 114); box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1); box-sizing: border-box; } input[type=text]:hover, input[type=password]:hover, label:hover ~ input[type=text], label:hover ~ input[type=password] { background: rgb(242, 242, 242); !important; } input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1); } .login-top { height: auto;/*85px;*/ } .login-bottom { padding: 35px 15px 0 0; } 
 

Если все вышеперечисленное не выполнено, попробуйте установить следующие свойства для ввода, чтобы он занимал максимальное пространство, но не переполнял:

 input { min-width: 100%; max-width: 100%; } 

Другие ответы, похоже, говорят вам жестко закодировать ширину или использовать взломанный браузер. Я думаю, что есть более простой способ.

Вычисляя ширину и вычитая отступы (что вызывает перекрытие поля). 20px поставляется с 10px для левой прокладки и 10px для правильного заполнения.

 input[type=text], input[type=password] { ... width: calc(100% - 20px); } 

Добавка добавляется к общей ширине. Поскольку ваш контейнер имеет ширину пикселя, вам лучше давать входы ширину пикселя, но не забудьте удалить прокладку и границу с указанной вами ширины, чтобы избежать такой же проблемы.

Попробуйте изменить box-sizing border-box . padding добавляет width ваших input элементов.

См. Демо здесь

CSS

 input[type=text], input[type=password] { width: 100%; margin-top: 5px; height: 25px; ... } input { box-sizing: border-box; } 

+ box-sizing

Заполнение по существу добавляется к ширине, поэтому, когда вы говорите, width:100% и padding: 5px 10px вы фактически добавляете 20 пикселей на 100% ширину.

Вы хотите, чтобы поля ввода были центрированы? Элемент trick to center: укажите ширину элемента и задайте маржу в auto, например:

 margin : 0px auto; width:300px 

Ссылка на ваш обновленный скрипт:

http://jsfiddle.net/4x2KP/5/

У вас также есть ошибка в вашем css с восклицательным знаком в этой строке:

 background:rgb(242, 242, 242);!important; 

удалите перед ним двоеточие. Тем не менее, важно использовать редко и в значительной степени можно избежать.

Я пробовал эти решения, но не получил окончательного результата. В конце я использовал правильную семантическую разметку с набором полей. Он сохранил необходимость добавления любых вычислений ширины и любого размера windows.

Он также позволяет вам устанавливать ширину формы по мере необходимости, а входы остаются в пределах прокладки, необходимой для ваших кромок.

В этом примере я установил границу формы и набора полей и непрозрачный фон для легенды и набора полей, чтобы вы могли видеть, как они пересекаются и сидят друг с другом.

      
Log in

You may need some content here, a message?

  • IE 8: исправление фонового размера
  • CSS - почему не работает процентный рост?
  • Ширина UIWebView iPhone не подходит после операции масштабирования + изменение UIInterfaceOrientation
  • Как установить начальный масштаб / ширину для веб-просмотра
  • Как получить размер NSString
  • Холст растягивается при использовании CSS, но нормальный с свойствами «ширина» / «высота»
  • Interesting Posts

    В чем разница между предварительным приращением и пост-приростом в цикле (для / while)?

    Как я могу проверить два или более полей в комбинации?

    Самый простой способ объединить выпуск в один JAR-файл

    как использовать Ontouch и Onclick для ImageButton?

    Создание экранной клавиатуры

    Как кодировать перечисление с помощью NSCoder в swift?

    Как выполнить макрос Outlook 2010 с помощью AutoHotKey?

    Могу ли я преобразовать собственный беспроводной адаптер в ключ?

    Автоматически показывать подключенные запоминающие устройства на рабочем столе Windows

    Сегодня n-й день года

    Должны ли команды switch всегда содержать предложение по умолчанию?

    Почему я получаю символ глаза на своих почтовых учетных записях в полях пароля в Internet Explorer?

    Как разделить каждую строку матрицы на элементы вектора в R

    Apache HttpClient 4.1 – Прокси-аутентификация

    Сочетания клавиш быстрого доступа к пунктам меню / надстройкам

    Давайте будем гением компьютера.