在图像上布置单选按钮

Question

我正在尝试以下布局。

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

这是我的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>

http://jsfiddle.net/p6J9A/

Answer 1

恕我直言，如果您想在图像中布置一些单选按钮，最简单的方法是使用背景图像创建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> 

在css文件中，您应该声明类似的内容：

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