Question

所以我遇到了一个表格单元格中的标签问题而没有为自己腾出空间而是以某种方式支持它的兄弟姐妹，但是它占据了兄弟姐妹的空间？

我创建了一个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;
}

我已经尝试了所有我能想到的东西让它按预期工作（左边是标签，右边是兄弟姐妹），但无论我尝试什么，都不会发生。也许有人可以帮助我出去？

Answer 1

你浮动一些元素而一些不是检查你的位置：xxx和float：x行

主要是这些行应该

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

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

标签不在表格单元格中创建空格

1 个答案: