CSS Введення з шириною: 100% виходить за межі батьків

172

Я намагаюся зробити форму для входу, що складається з двох полів введення з вставкою, але ці два поля завжди виявляються вищими за межі батьків; проблема пов'язана з доданою вставкою . Що можна зробити, щоб виправити це питання?

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

Примітка: Код може бути не найчистішим. Наприклад, елемент 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>

Розгорніть фрагмент

— шкірка
джерело

310

Використовуйте визначення CSS, box-sizing:border-boxщоб запобігання впливати на ширину або висоту елемента. Див box-sizing.

border-box : властивості ширини та висоти включають прокладку та облямівку, але не межа ... Зауважте, що прокладка та облямівка будуть знаходитись всередині коробки.

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

Зверніть увагу на сумісність браузераbox-sizing (IE8 +).
На час цього редагування префікси не потрібні; см 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>

Розгорніть фрагмент

— шоудев
джерело

1

Це, здається, робить свою роботу. Велике спасибі, ти врятував мені досить багато часу.

— peelz

2

Щоб розширити свою першу частину:box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;

— Bradmage

ти робиш мого дня приятелем ... маленький css, але дуже важливий :)

— Гурав Махія

18

Якщо все вище не вдається, спробуйте встановити наступні властивості для вашого вводу, щоб він мав максимум місця, але не переповнювався:

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

— Дейу
джерело

1

саме це працювало для мене дуже простим рішенням дякую

— AlexGH

13

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

Обчислюючи ширину і віднімаючи прокладку (що спричиняє перекриття поля). 20px походить від 10px для лівого накладки та 10px для правого накладки.

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

— Аль-Ззіва
джерело

3

я не можу повірити, що я ніколи цього не бачив. Мій приклад використання добре підігнав, тоді як інші відповіді не відповіли. спасибі

— пограбуйте

Працювали для мене. min/max-width: 100%;не зробив, не box-sizing: border-box;зробив. Я думаю, що весь мій сайт помістити в контейнер і дати йому набивання буде спрацьовувати, але я не хочу робити цього лише для цього простого виправлення.

— СУМ1

4

Спробуйте змінити 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

— Сураб
джерело

2

Обшивка додається до загальної ширини. Оскільки ваш контейнер має ширину пікселів, вам краще надавати вхідним сигналам ширину пікселів, але пам’ятайте, що виймете прокладку та рамку із встановленої ширини, щоб уникнути тієї ж проблеми.

— ralph.m
джерело

1

Я спробував ці рішення, але не отримав переконливого результату. Врешті-решт я використав належну семантичну розмітку із набором поля. Це заощадило необхідність додавати будь-які обчислення ширини та будь-які розміри коробки.

Це також дозволяє встановити ширину форми, як вам потрібно, і вхідні дані залишаються в межах прокладки, необхідної для ваших країв.

У цьому прикладі я поставив рамку форми та набору полів та непрозорий фон на легенді та наборі польових даних, щоб ви могли бачити, як вони перетинаються та сидять один з одним.

<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>

— Джейсон Меррі
джерело

0

Прокладка по суті додається до ширини, тому, коли ви говорите, width:100%і padding: 5px 10pxви фактично додаєте 20 пікселів до 100% ширини.

— n00dle
джерело

1

І як я міг виправити цю проблему? Я багато років намагаюся багато речей: /

— peelz

Видаляти 100% -ну ширину не потрібно, оскільки входи - це вбудовані елементи.

— Енді Г

0

Ви також маєте помилку у своєму css із знаком оклику в цьому рядку:

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

видаліть перед ним напівколонку. Однак важливе значення слід застосовувати рідко, і його можна значною мірою уникнути.

— Енді Г
джерело

А, дякую, я, мабуть, пропустив це, плюс, важливий тег навіть не вимагався.

— peelz

-1

Ви хочете, щоб поля вводу були по центру? Підступ до центральних елементів: вкажіть ширину елемента та встановіть поле для автоматичного, наприклад:

margin : 0px auto;
width:300px

Посилання на вашу оновлену скрипку:

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

— моніка
джерело

Насправді я намагаюся довести їх до автоматичного розміру до ширини ".loginForm". Напр .: jsfiddle.net/4x2KP/7

— peelz

Ви можете змінити ширину .loginForm, і входи повинні залишатися в центрі

— monika

Так, це працює, але я додав "вставлення" прокладки з причини: я не хочу, щоб текст починався "відразу з початку". Дивіться цю картинку: d.pr/i/xSH1 (Порівняйте вхід електронної пошти з паролем)

— peelz