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

【问题标题】：Labels under inputs inline with other text输入下的标签与其他文本内联
【发布时间】：2020-01-28 01:14:48
【问题描述】：

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

我尝试在输入框下方创建新表格行并使用边距，但这在 Chrome 中不对齐，在 IE 中可以，但不是 Chrome。

我试过了

您将到达：
（日期）标签>在
（时间）标签>，请随身携带所有文件。

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

改写：我需要类似段落的东西，带有一段文本，但输入混合到该文本中。然后我需要直接在输入下的小的描述性标签。我不希望这些小的描述性标签仅在输入下方与其他段落的文本内联...示例：

“这是一个段落段落文本在此处继续再次，段落文本在此处与其他段落文本内联，并且输入”

【问题讨论】：

拜托，您能否重新表述您的问题，很难理解您要做什么？

标签： html forms css-tables

【解决方案1】：

跳过表格并改用 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>

【讨论】：

【解决方案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

【讨论】：