Question

我正在尝试将2个输入元素放在一个图像元素中。我将输入元素的位置设置为绝对，并且只将左输入输入到图像元素内部，而第二个输入留在外部。

我想知道为什么会发生这种情况，我还需要一种解决方案来将正确的输入放入图像中。

.container-fluid {
  text-align: center;
  position: relative;
}

img {
  display: inline;
  max-height: 100%;
}

.myB {
  position: absolute;
  top: 50%;
}

<div class='container-fluid'>
  <input class='myB' type='button' value='<'>
  <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
  <input class='myB' type='button' value='>'>
</div>

Answer 1

多个问题：

设置按钮的位置，并且不要让浏览器决定这样做。诸如此类的小事情可能会破坏旧版/其他浏览器中的布局
将容器设置为inline-block，因为您不希望其覆盖整个宽度

.container-fluid {
      position: relative;
      display:inline-block;
      width:auto;
    }
    
    img {
      max-height: 100%;
    }
    
    .myB {
      position: absolute;
      top: 50%;
    }
    .myBRight{
      right:0px;
    }
    .myBLeft{
      left:0px;
    }

<div class='container-fluid'>
      <input class='myB myBLeft' type='button' value='<'>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
      <input class='myB myBRight' type='button' value='>'>
</div> <!-- container-fluid -->

Answer 2

我希望这会有所帮助，基本上我会根据图像的大小设置按钮的位置，或者输入不要紧。显然按钮元素的“背景” 图片会溢出，但如果tou将px的元素的“位置”设置为小于px，则会将箭头设置在正确的位置。对不起，我的英语。

img{
  width:400px;
  height:300px;
}


#next,
#prev{
  position:absolute;
  top:inherit;
}

#next{
  left:400px;
}

  
      <button id="prev" type="input" > < </button>
      <button id="next" type="input" > > </button>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">

为什么输入元素不适合图像内部？

2 个答案: