Question

我有一个包含两个跨度的单元格的表，第一个包含跨度和输入。我希望这些重叠（我使用它们来创建就地编辑）。因此，我将父跨度定位设置为relative，并将其位置设置为绝对值为left：0。当我这样做时，第二个顶部跨度也移动到单元格的左侧。为什么？如何修复（我希望内部跨度和输入重叠）

更新：请注意，输入用于编辑就地，因此需要在其后定位另一个范围。否则，当我删除可见性样式（通过切换类）时，它将覆盖第二个跨度。我已经更新了小提琴，因此它显示了机器人的范围和输入。

这是一个小提琴：http://jsfiddle.net/jvyLtr82/5/

这是HTML：

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span>hi</span>
                    <input value="hi"/>
                </span>
                <span> there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first {
    position:relative;
}

.first > * {
    position: absolute;
}
.first > span {

    left: 0;
}

.first > input {
    left: 0;
}

Answer 1

如果您不想在输入字段中输入数据，请尝试以下

HTML：

  <table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).hide().next().show()'>hi</span>
                    <input value="hi" onclick='$(this).hide().prev().show()'/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first >input {  
   display: none;
}

这是JSFiddle：http://jsfiddle.net/jvyLtr82/8/

如果您想在输入字段中输入数据，请尝试以下

HTML：

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).next().toggle().next().toggle()'>switch</span>
                    <span >hi</span>
                    <input value="hi"/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first >input {  
   display: none;
}

这是JSFiddle：http://jsfiddle.net/jvyLtr82/10/

Answer 2

因为span和input都是绝对定位的，所以没有什么可以添加到父跨度宽度。仅将输入定位为绝对输入并在编辑模式下使跨度隐藏并输入可见：

.first {
    position:relative;
}
.first > input {
    position: absolute;
    display: none;
}
.first.edit > span {
    display: none;
}
.first.edit > input {
    display: inline-block;
    position: relative;
}

演示： http://jsfiddle.net/jvyLtr82/7/

Answer 3

这是你应该做的：

.first {
    position:relative;
}

.first > * {
    position: relative;
}
.first > span {

    left: 0;
}

为什么跨度重叠

3 个答案: