div框对齐中的空间问题答案

【问题标题】：Space issue in div box alignmentdiv框对齐中的空间问题
【发布时间】：2015-03-11 15:20:26
【问题描述】：

正在设计“登录”页面，在这里，在我按下提交按钮之前页面看起来还可以，但是在我按下提交按钮之后，它看起来就不行了。第二个 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%;
}

按下“提交”按钮后，

【问题讨论】：

请发布您的源代码
是的，没有代码，这一切都是我们的猜测。我的第一印象是红色警告标签以某种方式影响了 div 上方的高度/边距。您可以尝试将位置设置为绝对或垂直对齐：顶部...再次，所有猜测。
大家好，我已经添加了我的代码 sn-ps，
由于错误消息，您的 Div 向下移动。
正如@deebs 和Nepal12 所写，考虑检查标签css 属性以找出原因。

标签： html css

【解决方案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;
    }

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

【讨论】：

嗨，我只输入了'margin:auto;'，它解决了我的问题，谢谢

【解决方案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%;
}

【讨论】：