我正在为正确的使用HTML和CSS定位两个表单而苦恼。我已经尝试了float和display:inline-block两种方法,但只有用其中一种方法才能使一半的内容正常工作。
我的目标是将两个表单显示在一起,居中在一个DIV中,该DIV仅占页面的70%,每个表单占用可用空间的50%。两个表单都需要具有最小宽度,并且如果没有足够的空间同时显示两个表单(例如在手机纵向模式下显示页面时),它们应被推入单独的行中。
如果我浮动包含表单的两个DIV,则它们会并排显示,但未正确居中(因为它们浮动到左侧或右侧,我需要将每个DIV的大小设置为40%,否则它们无法并排)。 如果我使用display:inline-block,则DIV的大小和居中位置都正确,但它们在两个单独的行中而不是相邻的。这是使用display:inline-block的当前代码。
当使用display:inline-block时,为什么表单会显示在不同的行上?
我的目标是将两个表单显示在一起,居中在一个DIV中,该DIV仅占页面的70%,每个表单占用可用空间的50%。两个表单都需要具有最小宽度,并且如果没有足够的空间同时显示两个表单(例如在手机纵向模式下显示页面时),它们应被推入单独的行中。
如果我浮动包含表单的两个DIV,则它们会并排显示,但未正确居中(因为它们浮动到左侧或右侧,我需要将每个DIV的大小设置为40%,否则它们无法并排)。 如果我使用display:inline-block,则DIV的大小和居中位置都正确,但它们在两个单独的行中而不是相邻的。这是使用display:inline-block的当前代码。
#background {
background-image: url(pic.jpg);
height: 400px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
}
#form-wrapper {
width: 70%;
margin: 0 auto;
text-align: center;
}
#form1 {
width: 50%;
display: inline-block;
}
#form2 {
width: 50%;
display: inline-block;
}
<div id="background">
<div id="form-wrapper">
<div id="form1">
<form>some form code here</form>
</div>
<div id="form2">
<form>some form code here</form>
</div>
</div>
</div>
<div id="form-wrapper>
- Ben Philipp