将两个元素设置为 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

或者，在 js fiddle 上测试过，它链接到 --

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

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

这是最简单（可能也是最合乎逻辑）的修复方法 - 只需添加一个零。这个简写设置上下边距为15px，左右设置为0，得到你想要的效果。

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

如果您想更明确，可以取消 padding 属性并选择此属性：

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

无论哪种方式，您都不会在所有四个方面都设置 padding 只是为了在以下两行中否定它

Answer 2

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

Answer 3

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

如果还使用边距，它们仍然会增加元素的大小和占用的空间。

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