使用带标签的控件时定位标签

Question

好的，尝试创建一个具有内联可填写表单的可填写表单（想想Mad Libs风格）。

对于使用带标签控件的元素，并给出以下代码：

<form><p>Lorem ipsum <label class="label__fill-in"><input type="text" class="fill-in" maxlength="30">(community)</label> and stuff</p></form>

是否可以将标签文本“（社区）”定位在输入行下方而不使用for="id-name"（在MDN中称为“标记控件”）仅使用CSS？选择器只对真正的标签文本而不是其中的输入是什么？

Answer 1

而是试图移动文本，使输入块元素导致文本低于它。

根据您的结构，我想您正在寻找标签之外的文本与输入一致。因此，为了做到这一点，请制作标签display: inline-block，使其达到您想要的高度。然后，您可以将p的文本与顶部对齐，以便所有文本都排成一行。

https://jsfiddle.net/foyxhz4y/

我用于此的CSS是：

label input {
  display:block;
}
label {
  display: inline-block;
}

p * {
  vertical-align: top;
}

要选择未输入的标签内容，可以使用:not选择器。因此，要设置您可以使用的文本的样式：

label *:not(input)

这将选择标签中不是输入元素的所有内容。