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

这是最简单(并且可能是最合乎逻辑的)修复 - 只需添加一个零。此速记将顶部和底部的填充设置为 15 像素，同时将左侧和右侧设置为 0，从而达到您想要的效果。

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

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

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

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