我正在尝试创建两个彼此相邻但在它们之间有一点空间的div。这是我的以下代码,间距相隔很远。我无法弄清楚如何设置间距:
<style type="text/css">
.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
border-radius: 1em;
}
.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}
.formLayout label
{
text-align: right;
padding-right: 20px;
}
br
{
clear: left;
}
.box_header {
font-weight: 600;
color: #000000;
text-align: center;
border-radius: 1em;
}
</style>
<div class="formLayout" style="float:left;">
<div class="box_header">
Account Manager Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
</div>
<div class="formLayout" style="float:right;">
<div class="box_header">
Client Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
答案 0 :(得分:3)
在你的第二张formLayout上,你可以这样做:
style='float:left; margin-left: 20px'
而不是右移:http://jsfiddle.net/33Tma/
显然,您可以将保证金更改为您需要的保证金。
此外,您应尽量避免使用内联样式。