CSS提交按钮和输入文本没有相同的宽度答案

【问题标题】：CSS submit button and input text don't have the same widthCSS提交按钮和输入文本没有相同的宽度
【发布时间】：2014-06-24 14:30:32
【问题描述】：

虽然我制作了提交按钮和输入文本：

width:60%

但是当我运行应用程序时，它们的宽度不同：

.loginClass {
  width: 40%;
  height: 40%;
  margin: auto auto;
}

.loginClass ul li {
  list-style: none;
}

.loginClass ul li input {
  width: 60%;
}

<form class="loginClass">
  <ul>
    <li>
      <input placeholder="Username" name="username" type="text" value="">
    </li>
    <li>
      <input placeholder="Username" name="username" type="text" value="">
    </li>
    <li>
      <input type="submit" value="Login">
    </li>
  </ul>

</form>

您能解释一下并提供帮助吗？

【问题讨论】：

标签： html css

【解决方案1】：

这是因为默认情况下两个边框属性不同..

在按钮上使用box-sizing: content-box，或在输入元素上使用box-sizing: border-box。

【讨论】：

+1。我不知道，但后来我默认使用通用“覆盖”。

【解决方案2】：

我刚刚加了

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

问题解决了

JSfiddle Demo

【讨论】：

虽然这是一个 box-sizing 问题，但这是一个危险的解决方案，因为可能存在不需要使用 box-sizing 设置样式的元素。
可能，但我默认使用它，所以 all 我的元素大小按照指示正确。
是的，但您是在为其他人回答问题。他们不知道通配符背后的原因，它可能导致比他们解决的问题更多的问题。 paulirish.com/2012/box-sizing-border-box-ftw 虽然通配符框大小技巧可能很有用，但实际上很多人需要使用浏览器自然呈现的填充和边距。