在字段集元素中获得输入框的100%均匀宽度
在字段集元素中获得输入框的100%均匀宽度
提问于 2014-04-04 15:57:46
我需要你的帮助,
如何使输入框在字段集元素中相对于字段集的宽度达到100%的均匀位置？
就目前的情况而言，似乎输入框正在从字段集中直接推开，我不知道为什么？
下面是问题的图片(ie10)：
下面是标记：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
fieldset {
padding: 3px;
width: 300px
}
label {
float:left;
font-weight:bold;
}
input {
width: 100%;
}
</style>
</head>
<body>
<fieldset>
<legend>Subscription info</legend>
<input type="text" name="name" id="name" />
</fieldset>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-04 16:04:44
您面临的问题是浏览器在input上计算的默认样式。浏览器向<input>元素添加填充和边框。
当您在输入上设置width:100%;时，如果添加默认填充和边框，则它呈现的范围比容器更宽，因此会溢出。
您可以通过在box-sizing:border-box;上添加：input来解决这个问题，因此填充和边框都包含在100%的宽度中。
小提琴
这里有关box-sizing属性的更多信息。
Stack Overflow用户
发布于 2014-04-04 16:07:41
抱歉之前的事。但如果你去掉垫子，它就不会被切断。
fieldset {
width: 300px
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22867571
复制相关文章
相似问题
腾讯云开发者
