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

Question

好吧，试图创建一个具有内联填充表格（想想疯狂的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中称为"标记的控件"），将标签文本"（社区）"放在输入行下方的标签"（community）"？选择器仅适用于真正的标签文本，而不是其中的输入？

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)

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