如何将标签置于范围滑块上方

Question

如何设置标签"在范围滑块上方，现在它在滑块上方，但不是直接在滑块上方。我试图使用标签,但没有工作 ............................................................................

.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}

<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki"> LED: <span id="wartosc-led">[stanled]</span>
<br/>
<button id="przycisk-led" style="margin-left: -8%;"></button>
<button id="przycisk-led1"></button>
</br>
<div class="popup-btn">
<button style="margin-left: auto;margin-right: auto;width: 50%;" onclick="show_schedule()">Schedule</button>
<span style="font-size: 12px;">bright</span>
<input style="width: 20%;" type="range" id="rangeinput" min="0" max="255" value="122" onchange="rangevalue.value=value" />
</div>
</div>

Answer 1

你可以在CSS中使用flex:

• 在标签和范围滑块周围包裹一个div。
• 设置div的display属性值为flex。
• 设置flex-direction属性为column
• 对于label，你应该定义一个name属性的范围滑块，并在label中使用<label for="some-name">Text</label>

希望有帮助。

.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
/*text-align: center;*/
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}
#przycisk-led {
margin-left: -8%;
}
#schedule-button {
margin-left: auto;
margin-right: auto;
width: 50%;
}
#brightness-label {
font-size: 12px;
color: white;
}
.range-slider-input {
display: flex;
flex-direction: column;
text-align: left;
border: 1px solid white;
padding: 2%;
}

<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki" alt="swiatlo.jpg" /> LED: <span id="wartosc-led">[stanled]</span>
<br>
<button id="przycisk-led"></button>
<button id="przycisk-led1"></button>
<div class="popup-btn">
<button id="schedule-button" onclick="show_schedule()">Schedule</button>
<div class="range-slider-input">
<label for="brightness" id="brightness-label">Brightness</label>
<input type="range" id="rangeinput" min="0" max="255" value="122" name="brightness" onchange="rangevalue.value=value" />
</div>
</div>
</div>

Answer 2

我去掉了所有不相关的代码，下面是我所做的:

1. 将标签和滑块都包裹为div，并赋予其flexcolumn的样式。
2. align-items:center是什么使它们都在主轴上。
3. width:max-content，使其不占用整个行宽度。

现在你可以把它放在任何你想要的地方:)

.special {
display: flex;
flex-direction: column;
align-items: center;
width: max-content;
}

<div class="special">
<span style="font-size: 12px;">bright</span>
<input type="range" id="rangeinput" min="0" max="255" value="122" />
</div>