Label element width till the end-CodePudding

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 >
  <input type="radio"  name="option" value="1" id="opt1">
  <label for="opt1">Preprocessor Home Page</label>
</div>

CodePudding user response：

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 >
  <input type="radio"  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 >
  <input type="radio"  name="option" value="1">
  <span>Preprocessor Home Page</span>
</label>

CodePudding user response：

maybe this could be a solution with 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;
}

Even better: wrap your <input> with <label> directly

Even better: wrap your `<input>` with `<label>` directly