Html 在图像上布置单选按钮

我正在尝试以下布局

单选按钮在图像上重叠，左右按钮在中心垂直对齐

这是我的HTML结构：

<div class="images">
    <img class="image" src="http://i.imgur.com/dL3io.jpg" />
</div>    



<div>
      <div class="button-left"></div>
      <div class="button-right"></div>
</div>



<div class="navigation">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
</div>

---

如果您想在图像中布置一些单选按钮，最简单的方法是使用背景图像创建div，然后在这些按钮内部进行布局。所以看起来应该是这样的

    <div class="images">
      <div>
          <div class="button-left"></div>
          <div class="button-right"></div>
      </div>
      <div class="navigation">
        <input type="radio" name="op">
        <input type="radio" name="op">
        <input type="radio" name="op">
        <input type="radio" name="op">
     </div>
   </div> 

---

你想买什么？slider？您已经将HTML放在了小提琴演示的JavaScript面板中。这就是我编辑你的问题的原因，但是你把它回滚了。很抱歉，我没有意识到这是怎么回事。该网站给了我一条关于一些编辑的信息，因为我没有进行编辑而不予理睬。Yes Nucleo1985我想设计一些类似引导幻灯片的东西。我想在HTML中保持这3个部分的独立。我能做的就是把按钮放在div图像标签里面。但是也添加了单选按钮，对吗？你能更具体一点吗？此布局将在所需图片的顶部制作按钮和单选按钮。你可以在JS fiddle上进行测试，只是不要像在提供的链接中那样在JS部分粘贴HTML代码。我正在尝试设计一些类似于引导滑块的东西，而不是那些花哨的东西。因此，我将有多个图像一个接一个地滑动。我尝试了你的建议，但它并没有让我接近我所寻求的

.images {
  background-image:url(http://i.imgur.com/dL3io.jpg);
  background-repeat:no-repeat;
}