将两个元素设置为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小提琴上测试，链接到 -

您只需修改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

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

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，它们仍会添加元素的大小和占用的空间。

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