表单弄乱了网页的布局

Question

我正在创建一个网页，但我遇到了问题。我添加了一个包含一些信息的表单来启动登录表单。我尝试为表单添加边距和填充，但它仍然完全混乱。这是混乱区域的代码和表格。

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">
    <div style="width:20%;display:inline-block;text-align:left;border: 2px green solid;"></div>
    <div id="paddingLeft" style="width:4%;display:inline-block"></div>
    <div style="display:inline-block; width: 50%;"></div>
    <div id="paddingRight" style="width:4%;display:inline-block"></div>
    <div id="loginTitle" style="display:inline-block; width: 20%;border:2px green solid;text-align:center;" class="style1">Login</div>

    <div style="width:20%;display:inline-block;text-align:left;height:100px;border: 2px green solid;"></div>
    <div id="paddingLeft2" style="width:4%;display:inline-block;height:100px;"></div>
    <div style="display:inline-block; width: 50%;height:100px;"></div>
    <div id="paddingRight2" style="width:4%;display:inline-block;height:100px;"></div>
    <div id="loginFormArea" style="display:inline-block; width: 20%;height:100px;border:2px green solid;text-align:center;">
        <form method="get" id="loginForm" style="height: 100%;padding:2px">
            <span class="style1" id="Username" style="display:inline-block; width:40%;">Username:</span>
            <input id="usernameInput" name="Text1" type="text" style="width:40%;display:inline-block;margin-top: 5px;height:15px" />
        </form>
    </div>
</div>

Answer 1

试试这个：

<div id="bodywrapper" style="width:100%;height:1000px;margin-top: 5px;">

代替：

<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">

我的建议是：

• 不要将 div 的 id 称为“body”。 body 是 html 中的结构元素。
• 删除左右边距。您已经说过它应该是宽度：100%，因此在其上添加边距是不可预测的。如果需要，您可以添加填充。这可能会达到您想要的效果。