我已經搜索過了。但無法解決我的問題。
我希望label元素增長到父元素的末尾，這樣當我有更多空間來選擇收音機時。當我添加display: inline-block;andwidth: 100%;時，它進入下一行。
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
}
.q-option:hover{
}
label{
display: inline-block;
/* width: 100%; */
background-color: blue;
}<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>uj5u.com熱心網友回復：
您可以display: flex在父級上使用并簡單地確保您的標簽根據需要增長和縮小以填充剩余空間。
您可以選擇添加一個gap屬性，以確保實際單選按鈕和標簽本身之間有足夠的負空格：
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
label {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}<div class="q-option">
<input type="radio" class="q-check" name="option" value="1" id="opt1">
<label for="opt1">Preprocessor Home Page</label>
</div>更好的是：直接包裝你<input>的<label>
但是，我建議您使整個單選按鈕由 label 元素包裹：這樣您就不必提供idandfor屬性：
.q-option {
/* Use flexbox on parent */
display: flex;
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
background-color: red;
/* Optional */
gap: 8px;
}
.q-option:hover {}
input span {
display: block;
background-color: blue;
/* Ensure label takes up remaining width */
flex: 1 1 auto;
}<label class="q-option">
<input type="radio" class="q-check" name="option" value="1">
<span>Preprocessor Home Page</span>
</label>uj5u.com熱心網友回復：
也許這可能是 flex 的解決方案：
.q-option{
margin: 1px 0;
padding: 5px;
border-radius: 4px;
color: white;
cursor: pointer;
background-color: red;
display: flex;
}
label{
background-color: blue;
flex: 1 0 auto;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515385.html
標籤：htmlcss