0

所以我在表格单元格中的标签有问题，它没有为自己腾出空间，而是以某种方式在它的兄弟姐妹后面，但在它的兄弟姐妹内部占用空间？

我创建了一个 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 小提琴中包含了重新创建问题的必要元素。它们如下：

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;
}

我已经尝试了我能想到的一切来让它按预期工作（标签在左边，兄弟在右边），但无论我尝试什么，它都不会发生。也许有人可以很好地帮助我？

4

1 回答 1

0

您浮动的一些元素和一些未检查您的位置：xxx 和浮动：xxx 行

主要是这些线应该去

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

td.trip-finder-table-cell > div > label:not([for]) {float: left;}
于 2013-07-12T17:10:08.907 回答