gpt4 book ai didi

jquery - 如何使用 css 在 "range" slider 后面设置一个居中的标签

转载 作者:太空宇宙 更新时间:2023-11-04 13:42:22 26 4
gpt4 key购买 nike

我的 CSS 有问题。如果我想要一个标签与一个 div 重叠,我只需设置 position:absolute 和 top: 0px,left: 0px。这对我来说通常有效,但在以下情况下,我不知道如何将我的文本设置在 slider 上方或透明 slider 下方。我希望你能帮我解决这个问题。

<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>
<input class="slider" type="range" value="0" min="0" max="100" id="slider1" step="5" />
<p id="rowlabel1">Test</p>
</h3>

</div>
</div>

我的CSS:

#rowlabel1 {
position: absolute;
z-index: 1;
}
#slider1 {
position: absolute;
z-index: 0;
}

http://jsfiddle.net/rHFS5/

最佳答案

这里有一个方法可以做到这一点。我稍微更改了 html,但本质是一样的。

<head>
<style type="text/css">
#rowlabel1 {
position: relative;
z-index: 1;
}
#slider1 {
position: relative;
clear: both;
z-index: 0;
}
.label {
text-align: center;
width: 100%;
}
.framer {
width: 200px;
}
</style>
</head>
<body>
<div data-role="collapsible-set">
<div data-role="collapsible" class="framer">
<h3>
<div class="label">
<span id="rowlabel1">Test</span>
</div>
<div>
<input class="slider" type="range" value="0" min="0" max="100" id="slider1" step="5" />
</div>
</h3>
</div>
</div>
</body>

HTH

关于jquery - 如何使用 css 在 "range" slider 后面设置一个居中的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22663412/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com