Question

我是HTML和CSS的新手，我有一个定位问题。

我想让它看起来像这样 desired_layout

＆＃13;

<div style="margin-left: 5%;">
  <div style="display: inline;">
    <img style=" width: 60px; " id="switch_img" src="../images/button_hotoff.png">
  </div>

  <div style="display: inline; padding-left: 10%;">
    <input id="heatSlider" data-slider-id='heatSliderSlider' type="text" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="0" />
  </div>
</div>

＆＃13;

但我现在不知道如何移动进度条。任何人都可以给我任何建议吗？感谢

Answer 1

尝试以下代码，我只是尝试将img和滑块放在一行中，而不是使用不同的行。：

$('#heatSlider').slider();

.wrapper {
  display: flex;
  align-items: center;
}

.inline-block{
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>

<div class="wrapper">
 <div class="inline-block" >
   <img style=" width: 60px; " id="switch_img" 
     src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png">
 </div>
<div class="inline-block" style="padding-left:2%">
 <input id="heatSlider" data-slider-id='heatSliderSlider' 
  type="text" data-slider-min="0" data-slider-max="255" data-slider-step="1" 
  data-slider-value="0" />
 </div>
</div>

如何将进度条与图像中心并行？

1 个答案: