使一个HTML元素在源代码中以相反的顺序出现在另一个元素的顶部

Question

我在WebUI中使用列表来呈现选项卡。我的方法要求我将LABEL元素放在DIV.之前

LABEL用于显示选项卡名称及其内容。

我试图在底部直观地显示选项卡，在顶部显示内容(即具有底部选项卡(

我的css/html看起来像：

ul {
list-style: none;
}
label {
padding: 0.1em 0.2em;
font-size: .8em;
cursor: pointer;
position: relative;
}
div {
position: relative;
}

<ul>
<li>
<label>Tab Name 1</label>
<div>Content for tab 1</div>
</li>
</ul>

有人知道我该如何达到这样的效果吗？

Answer 1

使用position:relative可以重新排列元素。只有当你有预先定义的高度时，这才会起作用。下面的代码适用于预定义的高度将CSS。

ul {
list-style: none;
height: 50px;
}
label {
padding: 0.1em 0.2em;
font-size: .8em;
cursor: pointer;
position: relative;
height: 30px;
top: 20px;
}
div {
position: relative;
height: 20px;
top: -30px;
}

<ul>
<li>
<label>Tab Name 1</label>
<div>Content for tab 1</div>
</li>
</ul>

如果您不确定列表的高度，请考虑在使用onload事件侦听器加载页面时使用JavaScript设置元素的top和height属性。