将两个元素设置为 100% 宽度，但一个看起来比另一个宽得多

Question

我希望 HTML 表单上的两个元素具有相同的宽度。我已将两者的宽度都设置为 100%，如下所示

input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
}

input[type=submit] {
  margin-bottom: 20px;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  font-size: 15px;
  cursor: pointer;
}

但是当您查看我的表单时（至少在 Mac Google Chrome），https://jsfiddle.net/1v0xe9jx/1/，文本框明显比提交按钮宽。如何调整我的文本框（或者可能是提交按钮的问题），使其看起来与按钮具有相同的宽度？

Answer 1

您应该将 box-sizing: border-box 添加到文本 input CSS 中。这使得 border 和 padding 包含在宽度计算中。至少在 Mac 上的 Chrome 上，用户代理样式表在提交 input 时为您包含此内容，但不包含文本 input，这导致了这种差异。

Answer 2

查看 CSS 中的 box-sizing。具有 100% 和边距的 input 将溢出其容器。

.content{
  padding:0;
  margin:0 auto;
  width:80%;
  background:red;
  padding:10px 0;
}

.overflow{
  display:block;
  background:pink;
  width:100%;
  padding:15px;
}

.percentages{
  display:block;
  background:orange;
  width:80%;
  padding:10px 10%;
}

.border-box{
  display:block;
  background:aqua;
  width:100%;
  padding:15px;
  box-sizing:border-box;
}

<div class="content">
  <div class="overflow">Overflowed</div>
  <div class="percentages">Percentages</div>
  <div class="border-box">Box Sizing Border Box</div>
</div>

Answer 3

或者，在链接到 --

的 js fiddle 上进行测试

您可以简单地修改 css 选择器的 padding 属性：

input [type=text] {
  padding: 15px 0;
}

这是最简单（可能也是最合乎逻辑的）修复 - 只需添加一个零。 shorthand 将顶部和底部的内边距设置为 15px，同时将左侧和右侧设置为 0，从而达到您想要的效果。

将所有四个边的填充设置为 15px 更有意义，然后将其在左侧和右侧设置为 0——如其他答案之一所建议的那样。

如果你想更明确，你可以取消 padding 属性并选择这个：

input [type=text] {
  padding-top: 15px;
  padding-bottom: 15px;
}

无论哪种方式，您都没有在所有四个方面设置 padding 只是为了在以下两行中取反

Answer 4

一些 HTML 元素有预定义的边距和填充，在给它们指定宽度时需要考虑到这一点。

这些预定义的值是在浏览器的用户代理设置中设置的，并且由于它们可以（并且对于某些元素它们确实如此）具有不同的值，即使没有给它们指定宽度，这也会增加问题。

在您的情况下，不使用边距，有一个简单的解决方案，您可以将 box-sizing: border-box 设置为 input[type='text'] 和 input[type='submit']，以确保跨浏览器的布局一致。

box-sizing: border-box将使边框和填充的设置大小包含在元素设置宽度中。

#resize {
  position: absolute;
  margin-top: 100px;
  margin-left: 50px;
  color: #41c54c;
}


/* line 8, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

div#envelope {
  width: 55%;
  margin: 10px 30% 10px 25%;
  padding: 10px 0;
  border: 2px solid gray;
  border-radius: 10px;
}


/* line 15, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

form {
  width: 70%;
  margin: 4% 15%;
  font-family: Manuelle;
  font-size: 14px;
}


/* line 21, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

header {
  background-color: #4180C5;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 8px;
  margin-top: -11px;
  margin-bottom: -8px;
  border-radius: 10px 10px 0 0;
  color: aliceblue;
}


/* line 32, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

.field {
  padding-top: 10px;
}


/* Makes responsive fields.Sets size and field alignment.*/


/* line 37, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

input[type=text] {
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  box-sizing: border-box;            /*  added property  */
}


/* line 45, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

input[type=submit] {
  margin-bottom: 20px;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #7ac9b7;
  background-color: #4180C5;
  color: aliceblue;
  font-size: 15px;
  cursor: pointer;
  box-sizing: border-box;            /*  added property  */
}


/* line 57, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

#submit:hover {
  background-color: black;
}


/* line 61, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

textarea {
  width: 100%;
  padding: 15px;
  margin-top: 10px;
  border: 1px solid #7ac9b7;
  border-radius: 5px;
  margin-bottom: 20px;
  resize: none;
}


/* line 70, /Users/davea/Documents/workspace/cindex/app/assets/stylesheets/form.css.scss */

input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

<div id="content" style="background-color: #e0e0e0;">
  <h2>Create New Notification</h2>
  <form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input type="hidden" name="authenticity_token" value="DHS408tHZXxdoZ/L2cUglHKCHIFbEkXuXNA+AG005Ikau/un0EIkS7MG8wVPgsPCSgxzmSrH0j8r99+06tpcgg==" />
    <input type="hidden" name="user_notification[id]" id="user_notification_id" />

    <div class="field">
      <label for="user_notification_crypto_currency_id">Crypto currency</label> <span class="required">*</span>
      <br>
      <select name="user_notification[crypto_currency_id]" id="user_notification_crypto_currency_id">
        <option value="">Select Currency</option>
        <option value="1020">Bitcoin</option>
        <option value="2077">Bitcoin Cash</option>
        <option value="2080">Dash</option>
        <option value="2075">Ethereum</option>
        <option value="2082">Ethereum Classic</option>
        <option value="2081">IOTA</option>
        <option value="2078">Litecoin</option>
        <option value="2084">Monero</option>
        <option value="2079">NEM</option>
        <option value="2083">NEO</option>
        <option value="2076">Ripple</option>
        <option value="2085">Stratis</option>
      </select>
    </div>
    <div class="field">
      <label for="user_notification_price">Price</label> <span class="required">*</span>
      <br>
      <input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
    </div>
    <div class="field">
      <label for="user_notification_buy">Condition</label>
      <br>
      <select name="user_notification[buy]" id="user_notification_buy">
        <option value="">Select Notification Time</option>
        <option value="false">Above</option>
        <option value="true">Below</option>
      </select>
    </div>

    <div class="actions buttonContainer">
      <input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
    </div>

  </form>


</div>

如果还使用边距，它们仍会增加元素的大小及其占用的 space。

margin 的解决方案是使用 CSS calc()，即像这样 width: calc(100% - 30px)，其中 30px 是元素左右边距的总和。

将两个元素设置为 100% 宽度，但一个看起来比另一个宽得多

Setting two elements to 100% width, yet one seems much wider than the other

html

css

width