字段集宽度问题

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 的第一步。也许你能帮我找到问题。

非常感谢

斯蒂芬

Answer 1

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

启用 box-sizing: border-box; 后，CSS 将尝试在设置的宽度内实现填充 ，因此宽度为 20px + ? = 100%;

border-box The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

在 Mozilla Developer Network 阅读更多关于 box-sizing 的信息。

字段集宽度问题

Width of fieldset issue

html

css

fieldset