Question

我有一个简单的css，它向左浮动元素并创建一个表结构。我希望表是动态的，如果用户扩展浏览器，则可以添加列，因此我使用了向左浮动的元素。但它有时不起作用。我创建了一个显示场景的jsfiddle。

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

我无法理解为什么会留下这个差距。这是小提琴

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

将margin和input元素上的select设置为0也可以解决问题。

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

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

使用左浮动的网格留下空隙

1 个答案: