Question

设计＆＃39;登录＆＃39;页面，这里，在我按下提交按钮之前页面看起来没问题，但是，在我按下提交按钮之后，它看起来不行。第二个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%;
}

enter image description here

提交后＆＃39;按下按钮，

enter image description here

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;
    }

它只是一个样本，你可以进一步研究它。我自己更喜欢使用％而不是像素，因为它们对响应式布局很有帮助。

Answer 2

有许多不同的方式来实现您的喜好，但如果不是浮动，您可以尝试以下方法：

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

div框对齐中的空格问题

2 个答案: