Question

我使用以下示例来使用图像而不是来自用户@Roko C. Buljan的radiobutton http://jsbin.com/image-instead-of-radio-button/5/和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 cose是：

<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（块内容）。

<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>

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

1 个答案: