2彼此相邻,两者之间的间距很小

时间:2014-06-26 19:22:39

标签: javascript html css

我正在尝试创建两个彼此相邻但在它们之间有一点空间的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>

1 个答案:

答案 0 :(得分:3)

在你的第二张formLayout上,你可以这样做:

style='float:left; margin-left: 20px'而不是右移:http://jsfiddle.net/33Tma/

显然,您可以将保证金更改为您需要的保证金。

此外,您应尽量避免使用内联样式。