css 输入宽度大于容器[重复]

avwztpqn 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(122)

- 此问题在此处已有答案**：

How to make an element width: 100% minus padding?（15个答案）
3天前关闭。
在以下HTML代码中：

<div>
  <label id="name-label">
    NOMBRE
    <input type="text" id="username" name="username" placeholder="Introduce tu nombre" required>
  </label>
</div>

通过应用以下CSS

div{
  border: 2px solid orange;
}

label{
  background-color: blue;
  display: block;
}

input{
  width: 100%;
}

input元素比包含它的label元素占用更多的空间。
为什么会发生这种情况？如果100%引用父元素，在本例中是label元素......那么它永远不会占用更多的空间，对吗？
我该怎么解决呢。非常感谢。

css

来源：https://stackoverflow.com/questions/75602902/input-width-greater-than-the-container

2条答案

按热度按时间

llycmphe1#

发生这种情况是因为默认情况下使用box-sizing: content-box;，这意味着您的输入是100%宽度+ padding宽度+ border宽度。
要解决此问题，您应该从输入字段中删除默认填充和边框：

input{
  width: 100%;
  padding: 0;
  border: none;
}

或者您应该将box-sizing更改为border-box（其中填充和边框包含在100%的宽度中）：

input{
  width: 100%;
  box-sizing: border-box;
}

赞(0）回复(0）举报 2023-03-05

y3bcpkx12#

input元素正在接受边框和填充。您必须将其设置为零。

input{
  width: 100%;
  border: none;
  padding: 0;
}

使用此CSS输入字段。这将修复！

赞(0）回复(0）举报 2023-03-05

我来回答

css 输入宽度大于容器[重复]

2条答案

相关问题

热门标签

最新问答