输入下的标签与其他文本内联

Question

我需要帮助对齐输入框下方的标签，例如应该在文本框中输入的内容的描述，但我还需要文本在

之后与文本框对齐

我尝试在输入框下方创建新的 table 行并使用边距，但这在 Chrome 中不符合，在 IE 中符合，但在 Chrome 中不符合。

我试过了

您将到达：
( Date)< /label >at < input type='text' >
(Time) ，请携带所有文件。

这应该是：
您将到达：at (inline with textboxes) ，请携带所有文件。（与之前的文本框对齐，因此这也应该在标签上方。）

重新措辞：我需要像段落这样的东西，有一段文本，但输入混合到这个文本中。然后我需要直接在输入下方的小描述性标签。我不希望这些小的描述性标签仅在输入的正下方与其他段落的文本内联...示例：

"This is a paragraph < input text here > < label that goes under input > paragraph text continues on here < another input text here > < label that goes under this input > again the paragraph text goes on here inline with the other paragraph text and the inputs"

Answer 1

跳过 table 并改用 display flex。

.form {
  display: flex;
  align-items: center;
}

.input-container {
  display: flex;
  align-items: flex-end;
  margin-right: 2rem;
}

.input-container__label {
  margin-right: .5rem;
}

<form action="" class="form">

  <div class="input-container">
    <label for="email" class="input-container__label">Email</label>
    <input type="text" class="input-container__element">
  </div>

  <div class="input-container">
    <label for="something" class="input-container__label">Something</label>
    <input type="text" class="input-container__element">
  </div>

</form>

Answer 2

我想我已经明白你想问什么了。您需要将标签和输入包装在 div 中，以便标签可以位于输入标签之外。

.label-under {
  position: relative;
  display: inline;
}

.label-under label {
  position: absolute;
  left: 0px;
  top: 10px;
}

span {
  line-height: 2.5;
}

<span style='display: inline-block;' >You will arrive on: <div class="label-under"><input type='text' >
<label>(Date)</label></div> at <div class="label-under"><input type='text' >
<label>(Time)</label></div>, please bring all documents with you.</span>

编辑：如果您在宽度较小的设备上查看，您可能需要调整 span 元素的行高。

// Is optional and can be removed.
span {
  line-height: 2.5;
}
// But top: 10px must be changed to top: 20px

输入下的标签与其他文本内联

Labels under inputs inline with other text

html

forms

css-tables