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

我有以下两个元素：一个标题和一个滑块，我想在一行中显示，但我没有做到这一点

我能修什么

谢谢

#biasindex{
位置：固定；
底部：40px；
宽度：100px；
高度：15px；
右：200px；/*“#菜单宽度”*/
字体大小：14px；/*更改此值以增大/减小按钮大小*/
/*宽度：2米；
高度：自动*/
z指数：10；
浮动：左；
}
.幻灯片{
显示：内联块；
浮动：左；
}
.slidecontainer{
宽度：100%；
浮动：左；
显示：内联块；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
显示：内联块；
浮动：左；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

偏差指数：

使用

dispaly:flex

包装元素

也可以在css中使用

.slidecontainer

，而不是

.slidecontainer

#biasindex{
显示器：flex；
}
.幻灯片{
显示：内联块；
浮动：左；
}
.slidercontainer{
宽度：100%；
浮动：左；
显示：内联块；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
显示：内联块；
浮动：左；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

偏差指数：

使用

dispaly:flex

包装元素

也可以在css中使用

.slidecontainer

，而不是

.slidecontainer

#biasindex{
显示器：flex；
}
.幻灯片{
显示：内联块；
浮动：左；
}
.slidercontainer{
宽度：100%；
浮动：左；
显示：内联块；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
显示：内联块；
浮动：左；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

偏差指数：

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

下面是修改后的代码

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

---

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

下面是修改后的代码

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

---

css样式中的键入

slidecontainer

只需在css中更新此代码

#biasindex{位置：固定；底部：40px；宽度：100px；高度：15px；右侧：200px；字体大小：14px；z索引：10；浮动：左侧；显示：flex；/*空白：nowrap；*/align items:center；}

typo

slidecontainer

在css样式中…只需在css中更新此代码即可{position:fixed；bottom:40px；width:100px；height:15px；right:200px；font size:14px；z-index:10；float:left；display:flex；/*空格:nowrap；*/align items:center；}