输入中的填充宽度为100% [英] Padding within inputs breaks width 100%

问题描述

好的，所以我们知道对对象设置填充会导致其宽度发生变化，即使它是显式设置的。虽然人们可以争论这背后的逻辑，但它会导致一些元素出现问题。

在大多数情况下，您只需添加一个子元素并向其添加填充，而不是将填充设置为100%，但对于表单输入，这是不可能的步骤。

看看这个：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

DIV.formvalue {
  background-color: #eee;
  border: 1px solid red;
  padding: 10px;
  margin: 0px;
}

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

<div class='formfield' id='field_text'>
  <div class='formlabel'>No padding</div>
  <div class='formvalue'>
    <textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
  </div>
  <div class='formlabel'>Also no padding</div>
  <div class='formvalue'>
    <input type='text' class='input2' name='apa' value='Or here...' />
  </div>
  <div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
  <div class='formvalue'>
    <input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
  </div>
  <div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
  <div class='formvalue'>
    <input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
  <div class='formvalue'>
    <input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
  <div class='formvalue correct'>
    <input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
  </div>
</div>

第二个输入的填充设置为5px，这是我非常喜欢的默认设置。但不幸的是，这使得输入在所有方向上都增加了10px，包括在100%宽度的基础上增加10px。

这里的问题是我不能在输入中添加子元素，所以我无法修复它。所以问题是：

有没有办法在输入中添加填充，同时仍然保持100%的宽度？它需要是100%，因为窗体将呈现在不同宽度的父级中，所以我事先不知道父级的宽度。

推荐答案

使用css3，您可以使用属性调整框大小来更改浏览器计算输入宽度的方式。

input.input {
    width: 100%;
    box-sizing: border-box;
}

您可以在这里阅读更多信息：http://css-tricks.com/box-sizing/

这篇关于输入中的填充宽度为100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！