Chinovski Chinovski - 6 months ago 10
CSS Question

How to apply CSS on texte label beside an input?

I have this small code contains a text (label) and a text input

What I am looking for is to have text + input take 100% of the div (i.e 20% for text and 80% for input) and the text should be in the middle of its zone with a background has the same height as the input.

I tried with span, with applying

background-color: blue;
on the div but It didn't have any impact.

Do you know ho to do it?

Thank you in advance.



#zoneFiltre {
width: 100%;
}

.champs {
width:20%;
background-color: blue;
text-align: middle;
color: white;
}

#filtreMultiAptitudes{
width:80%;
float:right;
}

<div id="listeMultiAptitude">
<div class="zoneFiltre">
<label class="champs">filter: </label>
<input type="text" id="filtreMultiAptitudes" />
</div>
</div>




Answer

If you want to use Flexbox you can use flex: 0 0 80% on input and flex: 1 on label also its text-align: center

.zoneFiltre {
  display: flex;
}
.champs {
  flex: 1;
  background-color: blue;
  text-align: center;
  color: white;
}
#filtreMultiAptitudes {
  flex: 0 0 80%;
}
<div id="listeMultiAptitude">
  <div class="zoneFiltre">
    <label class="champs">filter: </label>
    <input type="text" id="filtreMultiAptitudes" />
  </div>
</div>