使用圖像，而不是與下面我用下面的例子來使用的圖像，而不是單選按鈕<a href="http://jsbin.com/image-instead-of-radio-button/5/" rel="nofollow noreferrer">http://jsbin.com/image-instead-of-radio-button/5/</a>從用戶@Roko C. Buljan圖像

Question

文本和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>