Вход CSS с шириной: 100% выходит за пределы родительской границы
Я пытаюсь сделать форму входа в систему, состоящую из двух полей ввода со вставкой, но эти два поля всегда заканчиваются превышением границ своего родителя; проблема связана с добавленным вставка обивка. Что можно сделать для решения этой проблемы?
JSFiddle фрагмент: http://jsfiddle.net/4x2KP/
N. B.: код может быть не самым чистым. Например, элемент 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);
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
9 ответов
используйте определение CSS box-sizing:border-box
предотвратить прокладку от влияния ширины или высоты элемента. См. документацию для box-sizing
. Вы также можете проверить совместимость браузера box-sizing
(IE8+).
граница-box: свойства width и height включают заполнение и границу, но не поля... Обратите внимание, что обивка и граница будут внутри коробки.
input[type=text],
input[type=password] {
box-sizing : border-box;
}
изменить: Во время этого редактирования префиксы не нужны для 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;
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text" /></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password" /></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember" />
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
</div>
</form>
</div>
</div>
В качестве альтернативы, вместо добавления заполнения в
<input>
элементы сами, стиль <span>
элементы упаковки входов. В ту сторону,<input>
набор width:100%
без влияния любой дополнительной прокладки. Пример ниже:
#login-form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
padding: 10px 15px 25px 15px;
border: 4px solid rgb(40, 40, 40);
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
width: 320px;
}
label span {
display: block;
padding: .3em 1em;
background-color: rgb(215, 215, 215);
border-radius: .25em;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
margin: 0 0 1em;
}
label span:hover {
background: rgb(242, 242, 242);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
background: none;
border: none;
width: 100%;
height: 2em;
line-height: 2em;
font-size: 12px;
color: rgb(136, 136, 136);
outline: none;
}
.login-bottom {
margin: 2em 1em 0 0;
}
input#login-button {
float: right;
padding: 2px 25px;
}
input#login-remember {
float: left;
margin-right: 3px;
}
<form id="login-form">
<label>E-mail address
<span><input name="email" type="text" /></span>
</label>
<label>Password
<span><input name="password" type="password" /></span>
</label>
<div class="login-bottom">
<label>
<input type="checkbox" name="remember" id="login-remember" />Remember my email
</label>
<input type="submit" name="login-button" id="login-button" value="Log in" />
</div>
</form>
Если все вышеперечисленное не удается, попробуйте установить следующие свойства для ввода, чтобы он занял максимальное пространство, но не переполнение:
input {
min-width: 100%;
max-width: 100%;
}
другие ответы, похоже, говорят вам жестко закодировать ширину или использовать хак для браузера. Я думаю, есть более простой способ.
путем вычисления ширины и вычитания заполнения (что вызывает перекрытие поля). 20px приходит от 10px для левой прокладки и 10px для правой прокладки.
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
добавляется к общей ширине. Поскольку ваш контейнер имеет ширину пикселя, вам лучше дать входам ширину пикселя, но не забудьте удалить заполнение и границу из ширины, которую вы установили, чтобы избежать той же проблемы.
попробуйте изменить box-sizing
to border-box
. The padding
добавляет к width
вашего input
элементы.
в CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
прокладка по существу добавляется к ширине, поэтому, когда вы говорите width:100%
и padding: 5px 10px
вы фактически добавляете 20px к ширине 100%.
вы хотите, чтобы входные поля были центрированы? Трюк для центрирования элементов: укажите ширину элемента и установите для поля значение auto, например:
margin : 0px auto;
width:300px
ссылка на обновленную скрипку:
у вас также есть ошибка в вашем css с восклицательным знаком в этой строке:
background:rgb(242, 242, 242);!important;
удалите перед ним двоеточие. Однако !важное следует использовать редко и в значительной степени можно избежать.
Я пробовал эти решения, но так и не получил окончательного результата. В конце концов я использовал правильную семантическую разметку с набором полей. Он сохранил необходимость добавлять любые вычисления ширины и любой размер коробки.
Он также позволяет установить ширину формы по мере необходимости, а входные данные остаются в пределах заполнения, необходимого для ваших краев.
в этом примере я поставил границу на форму и набор полей и непрозрачный фон на легенде и наборе полей, чтобы вы могли видеть, как они перекрываются и сидеть друг с другом.
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>