Html CSS中的宽度无法正常工作

所以我的提交按钮有一个很奇怪的问题。我在提交按钮上使用了

width:100%

，它是一个“包装”，所以基本上应该是全宽度，但最终我似乎无法让它工作。这是我所说内容的屏幕截图

正如您所看到的，输入字段在宽度为100%的情况下都正常工作，但提交不起作用。这是相应问题的代码

HTML部分

<div class="wrap">
    <form>
        <div>
            <input type="text" placeholder="Name">
        </div>
        <div>   
            <input type="text" placeholder="Email">
        </div>
        <div>   
            <input type="password" placeholder="Password">
        </div>
        <div>
            <input type="submit">
        </div>  
    </form>
</div>

我可以用

width:109%

，但我更喜欢使用

100

，以及这不起作用的原因或解释，有什么想法吗

---

另外，.

一个快速修复方法是在表单中的所有输入元素上使用

框大小：border box

，然后声明一个统一的宽度：这将确保将宽度计算为最终的边框框宽度（包括边框宽度和填充）

然后，您可以安全地为每个单独的输入元素自定义填充（如果您愿意的话），而不必担心它们如何影响元素的最终宽度

---

下面是一个基于您提供的标记构造的概念验证fiddle；）

一个快速解决方法是在表单中的所有输入元素上使用

框大小：边框框

，然后声明一个统一的宽度：这将确保将宽度计算为最终边框框宽度（包括边框宽度和填充）

然后，您可以安全地为每个单独的输入元素自定义填充（如果您愿意的话），而不必担心它们如何影响元素的最终宽度

---

下面是一个基于您提供的标记构造的概念验证fiddle；）

您需要将

框大小：边框框

添加到输入类中。输入框中的右/左填充使它们比定义的宽度更宽。

您需要将

框大小：边框框

添加到输入类中。输入框中的右/左填充使它们比定义的宽度宽。

输入{padding:0 14px；}

使输入100%+28px宽

输入{padding:0 14px；}

使输入100%+28px宽

这是

填充：0 14px正在破坏布局（如图所示）

可接受的解决方案使用
框大小调整
属性，但某些较旧的浏览器可能不支持该属性，并且可能会导致其他副作用

我建议用
文本缩进：14px替换它
它是
填充：0 14px正在破坏布局（如图所示）

可接受的解决方案使用
框大小调整
属性，但某些较旧的浏览器可能不支持该属性，并且可能会导致其他副作用

我建议用
文本缩进：14px替换它
请发布完整的相关CSS（也适用于输入框）您确定是
按钮
？可能
按钮
是正确的，
输入
是错误的（即，
输入
的填充实际上溢出了
宽度：320px
。编辑：我想在你发布完整CSS后说，
输入
是错误的。
14px
填充可能导致
输入
超出容器边界……这不是因为换行符？在所有浏览器中都是一样的，例如，它是输入。你可以判断何时向换行符添加边框：请发布完整的相关CSS（也用于输入框）你确定是
按钮
？可能是
按钮
正确，而
输入
错误（即，
输入
的填充实际上溢出了
宽度：320px
。编辑：我想在你发布完整CSS后说，
输入
是错误的。
14px
填充可能导致
输入
超出容器边界……这不是因为换行符？在所有浏览器中都是一样的，例如，它是输入。你可以告诉你什么时候在换行符中添加边框：就像一个符咒。谢谢。我会接受的，当我可以的时候。还有+1fiddle@Colourity谢谢：）还添加了一个JSFIDLE来演示
box size:border box
是如何解决这个问题的。效果很好。谢谢。我会在可以的时候接受的。另外，对于fiddle@Colourity谢谢：）还添加了一个JSFIDLE来演示
框大小：border box
如何解决这个问题。呵呵。就要发布了。：）一把小提琴来制作@ejay的案例。当然会把它标记为答案，只是你发布了第二个答案。实际上，你不必这样做。你可以省略包装上的填充和输入上的宽度（它们已经是display:block）。最好删除一些CSS，以便添加额外的CSS来中和错误效果。我会采取另一种方式，即删除有效样式（填充）以避免其不可预见的效果（增加宽度），而不是修复效果（使用框大小）.删除填充将删除文本框中文本前后的空白。我认为，在通过文本缩进实现空白之前，但正确的空格又如何呢？呵呵。正准备发布。：）制作@ejay案例的小提琴。我会把它标记为一个答案，只是你发布了第二条。实际上，你不必这么做。您可以省略包裹上的填充和输入上的宽度（它们已经是display:block）。最好删除一些CSS，以便添加额外的CSS来中和错误效果。我会采取另一种方式，即删除有效的样式（填充）以避免其不可预见的效果（增加宽度），而不是修复效果（使用框大小）。删除填充将删除文本框中文本前后的空白。在空白可以实现之前，我认为，通过文本缩进，但正确的空间呢？
input {
    box-sizing: border-box;
    width: 100%;
}