html - 使用图像而不是带有图像下方文本的单选按钮

Question

我使用以下示例来使用图像代替单选按钮 http://jsbin.com/image-instead-of-radio-button/5/来自用户@Roko C. Buljan，CSS 代码是:

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}

Html 代码是:

<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
</label>

这很好，但是，现在我需要在图像下方放置一些文本，但我没有在 img 旁边使用 div( block 内容)得到它。

<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
    <div>my text 1</div>
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
    <div>my text 2</div>
</label>

文字出现在图片的右侧。

有什么想法吗？

提前致谢

Answer 1

制作标签 display: inline-block 会为你修复它

label { display: inline-block }
label > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img { /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img { /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}

<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
    <div>blah</div>
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
  <div>blah</div>
</label>