Flexbox 中图像和滑块之间不需要的 space。如何删除它？

Question

#slider1 {
  height: 1px;
  width: 90px;
  transform: rotate(270deg);
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>
<p>See the space between the image and slider?</p>

如何删除图像和滑块之间不需要的 space？似乎这里没有填充或边距，所以我的尝试失败了。谢谢！

Answer 1

space 是由元素本身在它获得变换之前创建的，旋转不会删除 space。

因此，在旋转输入之前执行 translateX(-50%)：如果您需要更好地控制位置，请使用不同于 50%

的值

#slider1 {
  height: 1px;
  width: 90px;
  transform: translateX(-50%) rotate(270deg);
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>

Answer 2

试试这个

你可以改变padding: 0 11px;

#slider1 {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 0px;
    height: 90px;
    padding: 0 2px;
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="container">
  <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
  <input type="range" id="slider1" />
</div>
<p>See the space between the image and slider?</p>

Flexbox 中图像和滑块之间不需要的 space。如何删除它？

Unwanted space between image and slider in flexbox. How to remove it?

html

css

layout

flexbox