Как отобразить текст и слайдер в одну строку в HTML / CSS?

Question

У меня есть следующие два элемента: заголовок и ползунок, которые я хочу отобразить в одной строке, но мне не удается это сделать.

Что я могу исправить?

Спасибо!

#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>

Answer 1

Используйте flexbox.Удалите float и добавьте дисплей 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;
}

Answer 2

Используйте dispaly:flex, чтобы обернуть элемент.

Также используйте .slidercontainer в css вместо .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>