如何在输入旁边的文本标签上应用 CSS？

Question

我有这个小代码包含一个文本（标签）和一个文本输入

我正在寻找的是让文本 + 输入占 div 的 100%（即 20% 用于文本，80% 用于输入）并且文本应位于其区域的中间，背景具有相同的高度作为输入。

我尝试使用 span，在 div 上应用background-color: blue;，但没有任何影响。

你知道怎么做吗？

提前谢谢你。

#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 1

如果您想使用Flexbox，您可以在input 上使用flex: 0 0 80%，在label 上使用flex: 1 以及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>

Answer 2

这是因为<label> 标签是一个内联元素，所以它不能取width/height。显示为inline-block。

body{
  margin: 0;
}

#zoneFiltre {
    width: 100%;
}

.champs {
    display: inline-block;
    width:20%;
    background-color: blue;
    color: white;
}

#filtreMultiAptitudes{
    display: inline-block;
    width:79.3%;
    float:right;
}

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

两个元素之间的空格是因为<input> 标签有一个默认的border。您可以使用较低的百分比（如上所示）或使用calc 函数来保留占据边框的宽度。

body{
  margin: 0;
}

#zoneFiltre {
    width: 100%;
}

.champs {
    display: inline-block;
    width:20%;
    background-color: blue;
    color: white;
}

#filtreMultiAptitudes{
    display: inline-block;
    width: calc(80% - 4px);
    float:right;
}

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

我认为另一种解决方案和最好的是使用box-sizing: border-box，它计算width作为width的一部分borders和paddings元素。

body{
  margin: 0;
}

#zoneFiltre {
    width: 100%;
}

.champs {
    display: inline-block;
    width:20%;
    background-color: blue;
    color: white;
}

#filtreMultiAptitudes{
    display: inline-block;
    width: 80%;
    box-sizing: border-box;
    float:right;
}

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

Answer 3

如果你喜欢这个，你可以使用display:table。

form {
    display:table;
    border:1px dotted black;
    width:100%;
}
form p {
    display:table-row;
}
label, form span {
    display:table-cell;
    padding:0.5em 0;
}
label {
    background:blue;
    color:white;
    vertical-align:top;
}
span input, span textarea {
    box-sizing:border-box;
    width:100%;
}
textarea {
    display:block;
}

<form>
    <p>
        <label for="input1">A label: </label>
        <span><input type="text" id="input1" /></span>
    </p>
    <p>
        <label for="input2">A longer label:</label>
        <span><input type="text" id="input2" /></span>
    </p>
    <p>
        <label for="txt">Textarea:</label>
        <span><textarea id="txt" rows="5" cols="15"></textarea></span>
    </p>
</form>