html - 标签未在表格单元格中腾出空间

Question

所以我遇到了一个问题，表格单元格中的标签没有为自己腾出空间，而是以某种方式位于其 sibling 的后面，但占用了其 sibling 内部的空间？

我创建了一个 JSFiddle 来向您展示我的意思:http://jsfiddle.net/8yzLP/

在表格单元格内的 div 中有一个标签，但它被它的同级 div 隐藏了。

这是结构标记:

<table>
    <tr>
        <td class="trip-finder-table-cell">
            <div class="trip-finder-sort-by-container">
                <label>Sort By</label>
                <div class="selectList_container trip-finder-sort-by-select" tabindex="0" style="position: relative;">
                    <p class="selectList_value">
                        <span class="selectValue_content" style="cursor: pointer; display: block; text-align: left;">Sort Option</span>
                        <span class="select-carat" style="cursor: pointer;"></span>
                    </p>
                </div>
            </div>
        </td>
    </tr>
</table>

CSS 来自四面八方，但我已经包含了必要的元素以在 JS fiddle 中重现问题。它们如下:

td.trip-finder-table-cell {
width: 17%;
padding: 15px 1.25%;
vertical-align: top;
position: relative;
}

td.trip-finder-table-cell > div[class*=trip-finder] {
position: relative;
}

td.trip-finder-table-cell > div > label:not([for]) {
display: inline;
float: left;
line-height: 30px;
margin-right: 5px;
}

.selectList_value {
padding: 4px 0 4px 10px;
width: 100%;
}

.select-carat {
display: block;
width: 25px;
height: 25px;
position: absolute;
float: right;
right: 3px;
top: 2px;
background: transparent url('../img/global/forms/select-carat.png') no-repeat center center;
}

.selectList_options {
overflow: hidden;
max-height: 250px;
overflow-y: auto;
position: relative;
top: 5px;
background: #fff;
background: rgba(255,255,255,.9);
border: 1px solid #ccc;
}

.selectList_container {
min-width: 110px;
border: 1px solid #cccccc;
background: #fcfcfc;
position: relative;
}

我已经尝试了所有我能想到的方法来让它按预期工作(标签在左边，兄弟在右边)，但无论我怎么尝试，它都没有发生。也许有人可以好心地帮助我？

Answer 1

您 float 了一些元素，有些则没有检查你的位置:xxx 和 float :xxx 行

主要应该走这几行

.select-carat {
position: absolute;
float: right;
right: 3px;
top: 2px;
}

td.trip-finder-table-cell > div > label:not([for]) {float: left;}