I have searched for it. But unable to solve my problem.
I want the label element to grow till the end of the parent element so that when I get more space to select the radio. When I add display: inline-block; and width: 100%;, it goes in the next line.
.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>
>Solution :
You can use display: flex on the parent and simply ensure that your label grows and shrink as necessary to fill up the remaining space.
You can optionally add a gap property to ensure there is sufficient negative whitespace between the actual radio button and the label itself:
.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>Even better: wrap your <input> with <label> directly
However, what I’d suggest is you make the entire radio button wrapped by the label element: in that way you do not have to provide an id and for attribute:
.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>