html - div 框对齐中的空间问题

Question

我正在设计“登录”页面，在这里，在我按下提交按钮之前该页面看起来还不错，但是，就在我按下提交按钮之后，它看起来不太好。第二个 div 向下移动了一点点。对解决这个问题有帮助吗？请引用下图

html

<div class="LogIn">
    <form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
    <label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
    <span class="user-name">Name should not be empty</span>
    <label>Password</label><input type="password" name="password" placeholder="Password"/>
    <label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
    <span class="password">Password does not be match</span>
    <label>Email</label><input type="email" name="email" placeholder="Email"/>
    <span class="email">Email is not valid</span>
    <label>Website</label><input type="url" name="url" placeholder="Website"/>
    <span class="urlcontent">Invalid Website URL</span>
    <input name="submit" type="submit" value="Submit"/>
    </form>
    </div>
    <div class="BusinessConnect">
    <p>Business Unit</p>
    <div id="BuCheck" class="BusinessCont">
    <p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>

    <p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
    <p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>

    </div>
    </div>

CSS

.BusinessConnect {
    float: left;
    font-size: 80%;
    height: 30%;
    margin-right: 0;
    position: relative;
    top: 3px;
    width: 35%;
}
.LogIn {
    float: left;
    margin-left: 256px;
    margin-top: 15px;
    width: 30%;
}

按下“提交”按钮后，

Answer 1

您可以遵循的一种方法是像这样分隔 div，

<section>
<div id="LogIn">
    You can put your thing here    
</div>

    <div id="BusinessConnect">
    <p>Business Unit</p>
       Your second part
    </div>

</section>


/// Your CSS
    section {
    width: 100%;
    height: 200px;
    margin: auto;
    padding: 10px;
    }
    div#BusinessConnect {
        border:1px solid #000000;
        margin-left:50%;
        height: 200px;   
    }
    div#LogIn {
        width: 45%;
        float: left;
        border:1px solid #000000;
        height:200px;
    }

这只是一个示例，您可以进一步研究它。 而且我自己更喜欢使用 % 而不是像素，因为它们有助于响应式布局。