问如何在HTML / CSS中一行显示文本和滑块？
EN

Stack Overflow用户

提问于 2019-02-14 12:20:16

回答 2查看 792关注 0票数 0

我有以下两个元素:我希望在一行中显示的标题和滑块，但我无法做到这一点。

我能修复什么？

谢谢!

#biasindex {
  position: fixed;
  bottom: 40px;
  width: 100px;
  height: 15px;
  right: 200px; /* "#menu width" */
  font-size: 14px; /* change this value to increase/decrease button size */
  /* width: 2em;
   height: auto;*/
  z-index: 10;
  float: left;

}

.slidercaption {
  display: inline-block;
  float: left;
}

.slidecontainer {
  width: 100%;
  float: left;
  display: inline-block;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: inline-block;
  float: left;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<div id="biasindex"><div class="slidercaption">bias index: </div><div class="slidercontainer"><input type="range" min="1" max="100" value="50" class="slider" id="biasRange">
</div></div>

html

css

slider

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-14 12:26:37

使用dispaly:flex包装元素。

在css中也使用.slidercontainer代替.slidecontainer。

#biasindex{
display:flex;
}
.slidercaption {
  display: inline-block;
  float: left;
}

.slidercontainer{
  width: 100%;
  float: left;
  display: inline-block;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: inline-block;
  float: left;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<div id="biasindex">
  <div class="slidercaption">bias index: </div>
  <div class="slidercontainer"><input type="range" min="1" max="100" value="50" class="slider" id="biasRange">
  </div>
</div>

票数 2

Stack Overflow用户

发布于 2019-02-14 12:28:37

使用flexbox。移除浮动并添加显示flex

以下是修改后的代码

#biasindex {
  position: fixed;
  bottom: 40px;
  width: 100px;
  height: 15px;
  right: 200px; /* "#menu width" */
  font-size: 14px; /* change this value to increase/decrease button size */
  /* width: 2em;
   height: auto;*/
  z-index: 10;
  /*float: left;*/
  display: flex;
}

.slidercaption {
  display: inline-block;
  float: left;
}

.slidecontainer {
  width: 100%;
  float: left;
  display: inline-block;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  display: inline-block;
  float: left;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}