Question

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

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

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

你知道怎么做？

提前谢谢。

＆＃13;

#zoneFiltre {
    width: 100%;
}

.champs {
    width:20%;
    background-color: blue;
    text-align: middle;
    color: white;
}

#filtreMultiAptitudes{
    width:80%;
    float:right;
}

＆＃13;

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

＆＃13;

Answer 1

这是因为<label>标记是内联元素，因此无法使用width / height。将其显示为inline-block。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

两个元素之间的空格是因为<input>标记具有默认border。您可以使用较低的百分比（如上所示）或使用calc功能来休息占据边框的宽度。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您想使用Flexbox，可以使用flex: 0 0 80%上的input和flex: 1上的label text-align: center

＆＃13;

.zoneFiltre {
  display: flex;
}
.champs {
  flex: 1;
  background-color: blue;
  text-align: center;
  color: white;
}
#filtreMultiAptitudes {
  flex: 0 0 80%;
}

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

3 个答案: