标签元素的宽度直到结束

Question

我已经搜索过了。但无法解决我的问题。

我希望label元素一直增长到父元素的末尾，这样当我有更多的空间选择单选按钮时。当我添加display: inline-block;和width: 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>

Answer 1

您可以在父级上使用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>

更好的是：直接用<label>包裹<input>

然而，我建议您将整个单选按钮用label元素包裹起来：这样您就不必提供id和for属性：

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

Answer 2

也许这可能是一个带有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;
}