html - 使用 float left 的网格会留下间隙

Question

我有一个简单的 css，它将元素 float 到左侧并创建一个表结构。我希望表格是动态的，能够在用户展开浏览器时添加一列，因此我使用了向左浮动的元素。但是它有时不起作用。我创建了一个显示场景的 jsfiddle。

它适用于一列、两列，但不适用于三列并且会留下间隙。

我不明白为什么要留下那个缺口。这是 fiddle

http://jsfiddle.net/workmonitored/hgt9Lp5n/12/

html

<div style="margin-left:5px;margin-right:15px">
<div class="keepTogether">
    <div class="description">Flows 1:</div>
    <div class="userOutput">
        <input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Flows 2:</div>
    <div class="userOutput">
        <input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Flows 3:</div>
    <div class="userOutput">
        <input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Flows 4:</div>
    <div class="userOutput">
        <input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Employee Name:</div>
    <div class="userOutput">
        <input type="text" name="DetailProjectReportingPeriodDetailEditUI.employeeName" style="width: 90%">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Affiliation</div>
    <div class="userOutput">
        <select>
            <option value="1">Member</option>
            <option value="1">Member Spouse</option>
        </select>
    </div>
</div>
<div class="keepTogether">
    <div class="description">Job Title</div>
    <div class="userOutput">
        <select>
            <option value="1">Mr smith</option>
            <option value="1">Mrs smith</option>
        </select>
    </div>
</div>
<div class="keepTogether">
    <div class="description">Classification</div>
    <div class="userOutput">
        <select>
            <option value="1">Worker Bee</option>
            <option value="1">Grasshoper Initiate</option>
        </select>
    </div>
</div>
<div class="keepTogether">
    <div class="description">Hire Date</div>
    <div class="userOutput">
        <input type="text" id="hiredate" name="DetailProjectReportingPeriodDetailEditUI.hireDateStr" style="width: 90%">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Job Status</div>
    <div class="userOutput">
        <input type="text" id="hiredate" name="DetailProjectReportingPeriodDetailEditUI.hireDateStr" style="width: 90%">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Pay Scale</div>
    <div class="userOutput">
        <input name="DetailProjectReportingPeriodDetailEditUI.payScale" size="12">
    </div>
</div>
<div class="keepTogether">
    <div class="description">Notes</div>
    <div class="userOutput">
        <textarea rows="1" name="DetailProjectReportingPeriodDetailEditUI.note" style="width: 99%"></textarea>
    </div>
</div>
<div style="clear:both; height:5px"></div>
<div class="keepTogether">
    <button id="saveReportingPeriodDetail">Save</button>
    <button id="cancelReportingPeriodDetail">Cancel</button>
</div>

CSS

.description {
    width: 120px;
    float: left;
}
.userOutput {
    width: 240px;
    float: left;
}
.userInput {
    width: 240px;
    float: left;
}
.keepTogether {
    display:inline;
    float:left;
    margin-bottom: 2px;
}
.keepTogether select {
    width: 220px;
}
.keepTogether input {
    width: 120px;
    float: left;
}

提前致谢。

Answer 1

将 input 和 select 元素的 margin 设置为 0 也解决了这个问题。

.keepTogether input {
    width: 120px;
    float: left;
    margin: 0;
} 

http://jsfiddle.net/hgt9Lp5n/13/