html - 如何将标签放在范围滑块上方

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>

标签： htmlcss

Answer 1

您可以flex在 CSS 中使用：

• 环绕div标签和范围滑块。
• 将display属性值设置div为flex。
• 将flex-direction属性设置为column
• 因为label您应该定义name范围滑块的属性并在labelas中使用该名称<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>