如何垂直對齊這兩個單選按鈕它們應該按x軸對齊.wrap{display:grid;grid-template-columns:auto auto;background:orange;}input[type='radio']{ display:inline-block; margin:0 9px; line-height:25px; vertical-align:middle;}.bbtn{ display:inline-block; line-height:25px;}<div class='wrap'><div><input type='radio' name='aradio' value='a' checked></div><div><input type='radio' name='aradio' value='b'><div class='bbtn'>LOREM</div></div></div>
2 回答
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
由于文本在定義對齊方式中發揮著作用，因此請確保您始終至少有一個類似的東西，例如具有相同屬性的空偽元素：
.wrap {
display: grid;
grid-template-columns: auto auto;
background: orange;
}
input[type='radio'] {
margin: 0 9px;
/*vertical-align: middle; change this to what you want to control the alignment */
}
.bbtn {
display: inline-block;
line-height: 25px;
}
.wrap> div::after{
content:"";
line-height:25px; /* the same as the one used with bbtn */
}
<div class='wrap'>
<div>
<input type='radio' name='aradio' value='a' checked>
</div>
<div>
<input type='radio' name='aradio' value='b'>
<div class='bbtn'>LOREM</div>
</div>
</div>
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
此 CodePen 顯示它們在左側垂直對齊。這就是你所追求的嗎？我grid-template-columns: auto auto;改為grid-template-columns: 1fr;
https://codepen.io/gunderodd/pen/abOGzpO
- 2 回答
- 0 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消