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“body”的id。 body是html中的结构元素。
左右移除边距。你已经说过它应该是宽度：100％，所以在它上面添加保证金是不可预测的。如果需要，您可以添加填充。这可能会产生你正在寻找的效果。

形成搞乱网页布局

1 个答案: