Question

我有这个HTML：

<body>
<table align="center" width="50%">
        <tr>
            <td>
                <div id="iconpanel">
                    <img alt="Logo" src="logo.gif">
                    <hr
                        style="border: solid #d3d3d3 1px; height: 3px; background-color: #d3d3d3;">
                    <form>
                        <fieldset id="fieldset">
                            <legend>Personalia:</legend>
                            Name: <input type="text"><br> Email: <input
                                type="text"><br> Date of birth: <input type="text">
                        </fieldset>
                    </form>
                </div>
            </td>
        </tr>
    </table>
    <div id="main"></div>
</body>

和我的css一起：

    #iconpanel {
    border-radius: 25px;
    border: 2px solid #d3d3d3;
    padding: 20px; 
    width: 100%;
    height: 100%; 
    align: center;
}

#fieldset {
    border-radius: 25px;
    border: 2px solid #d3d3d3;
    padding: 20px; 
    width: 100%;
    height: 100%; 
    align: center;
}

我得到了这个输出：

正如您所看到的，fieldset的宽度比父面板的宽度...

这是我Css的第一步。也许你可以帮我找到问题。

非常感谢

的Stefan

Answer 1

将box-sizing: border-box;添加到#fieldset以获得您想要的内容，因为现在每个元素的宽度为100% + 20px padding

启用box-sizing: border-box;后，CSS会尝试在内部实现填充设置宽度，因此宽度为20px +？ = 100％;

<强>边界框宽度和高度属性包括填充和边框，但是不是保证金。这是Internet Explorer使用的盒子模型文档处于Quirks模式。请注意填充和边框将是在盒子里面，例如.box {width：350px;边框：10px纯黑色;} 导致在浏览器中呈现的宽度为350px的框。内容框不能为负，并且被置于0，使其无法使用 border-box使元素消失。

在Mozilla Developer Network了解box-sizing的详情。

字段集问题的宽度

1 个答案: