我试图将一个表单居中放在一个 div 中,并在右边有一个稍微缩进的另一个 div,但我无法让元素对齐。
我如何使用 CSS 做到这一点?
此外,如果内容不适合页面,是否可以在新行的中心对齐右侧的 div?
.lander-form {
margin: auto;
}
.lander-add {
float: right;
margin-right: 50px;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
最佳答案
你需要的是float:left;
。您想要并排放置的两个 div 是 .lander-form
和 .lander-add
。你所拥有的是,.lander-add
设置为 float:right;
。这是一个常见的初学者错误。页面的两半都应该是 float:left
,您会认为让其中之一 float:right
更有意义,但事实并非如此。
我将 .lander-form
的宽度设为 65%,在边距处展开,并将 .lander-add
的宽度设为“auto”。这应该按照您希望的方式工作,当查看区域变小时或调整大小时,页面的右半部分出现在左下方。当您运行我的代码片段时,请注意下面显示的结果与全尺寸结果页面之间的差异。
.lander-form {
margin: auto;
float:left;
width:65%;
margin-bottom:20px;
margin-right:15px;
}
.lander-add {
float: left;
min-width:20%;
width:auto;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
关于html - 在一个 div 中居中放置一个表单,并在右侧显示另一个缩进的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48618742/