所以基本上我試圖讓標簽文本顯示在標簽影像下，而不是在它的右邊。但似乎當我嘗試通過 CSS 這樣做時，它破壞了我的頁面布局。我覺得我想太多了哈哈！我做錯了什么？
附上截圖 - https://i.imgur.com/43gQMb2.png
繼承人的CSS：
input[type=radio] {
width: auto;
display: block;
line-height: normal;
border: none;
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
display: inline-block;
display: inline-block;
color: rgb(64, 64, 64);
}
<p>
<input type="radio" name="ram" value="Corsair Vengeance LPX 16 GB (2 x 8 GB) DDR4-3200 Memory ( $0.00)" id="ram1-radio" onClick="Changeram(this.value);" checked >
<label for="ram1-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeanceram.jpg" width="30%"> ( $0)</label>
<input type="radio" name="ram" value="Corsair Vengeance RGB Pro 16 GB (2 x 8 GB) DDR4-3200 Memory ( $0.00)" id="ram2-radio" onClick="Changeram(this.value);">
<label for="ram2-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeancergb.jpg" width="30%">( $0)</label>
<div class="clear"> </div>
<input type="radio" name="ram" value="Corsair Vengeance LPX 32 GB (2 x 16 GB) DDR4-3600 Memory ( $0.00)" id="ram3-radio" onClick="Changeram(this.value);">
<label for="ram3-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeanceram.jpg" width="30%">( $0)</label>
<input type="radio" name="ram" value="Corsair Vengeance RGB Pro 32 GB (2 x 16 GB) DDR4-3600 Memory ( $0.00)" id="ram4-radio" onClick="Changeram(this.value);">
<label for="ram4-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeancergb.jpg" width="30%">( $0)</label>
</p>
正如你所說，使用這些 CSS 樣式可以完美地作業，我制作了一個 stylelabel 類來將它包裝在一起，就像你所說的那樣。影像和單選框現在可以正確顯示，現在是 2x2 顯示：D
.stylelabel label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
display: inline-block;
width: 200px;
text-align: center;
color: rgb(64, 64, 64);
}
.stylelabel label img {
border: none;
width: 50%;
}
uj5u.com熱心網友回復：
<br />在影像和文本之間放置一個，text-align:center;在標簽選擇器中也使用，保持行內塊顯示但不是兩次，它沒用。
uj5u.com熱心網友回復：
從標簽中洗掉 display: inline-block 但如果這不起作用，請嘗試將輸入和標簽放入一個 div 中，然后在 css 中定位 div 并給它
display: flex
flex-direction: column
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459639.html
上一篇：HTMLDIV的列印克隆