试图对齐输入框顶部的文本

Question

我试图在不手动对齐的情况下对齐输入框顶部的文本。关于如何执行此操作的任何指示？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="select-vehicle">
  <label for="exampleDataList" class="form-label">Select Plate number</label>
  <input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
  <datalist id="plate-number-list">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

Answer 1

使用 `legend` 标签

您可以使用 fieldset + legend 组合来获得与纯 CSS 类似的效果。请参阅下面的代码段：

fieldset {
  border-radius: 5px;
  width: max-content;
  border: 1px solid #D4D4D5;
}

legend {
  font-size: 12px;
}

#exampleDataList {
  width: 15rem;
  border: none;
}

#exampleDataList:focus {
  outline: none;
}

<fieldset>
  <legend>Select Plate number</legend>

  <div class="select-vehicle">
    <input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
    <datalist id="plate-number-list">
      <option value="San Francisco">
      <option value="New York">
      <option value="Seattle">
      <option value="Los Angeles">
      <option value="Chicago">
    </datalist>
  </div>

</fieldset>

备选

你可以给label一个相对位置，然后将它移动到你给的图片中的位置。请参阅下面的代码段：

.select-vehicle {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 12px;
  position: relative;
  background: #fff;
  width: max-content;
  padding-inline: 5px;
  top: .5rem;
  left: .8rem;
}

#exampleDataList {
  width: 15rem;
  padding: .8rem 1rem;
  border: 1px solid #D4D4D5;
  border-radius: 5px;
}

<div class="select-vehicle">
  <label for="exampleDataList" class="form-label">Select Plate number</label>
  <input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
  <datalist id="plate-number-list">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

更多关于 css positions here.

Answer 2

标题中提到了“传奇”，图片类似于 <fieldset>，Bootstrap 已将字段集弄得无法识别。这是一个带有 BS 类的标记，用于类似于字段集的字段集：

<fieldset class="border rounded p-2">
  <legend class="float-none w-auto"></legend>
</fieldset>

我在 <legend> 中添加了 .h6 和 .mb-0 以减少 font-size 和 margin-bottom。您确定需要 <label> 还是要向字段集添加更多表单控件？

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container">
    <section class="row">
      <form>
        <fieldset class="border rounded p-2">
          <legend class="float-none w-auto mb-0 h6">Select State of Registeration: </legend>
          <input id='state' name="state" class="form-control" list="state-list" placeholder='State'>
          <datalist id="state-list">
                <option value="San Francisco">
                <option value="New York">
                <option value="Seattle">
                <option value="Los Angeles">
                <option value="Chicago">
            </datalist>
        </fieldset>
      </form>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

试图对齐输入框顶部的文本

Trying to align the text on top of the input box

html

css

bootstrap-4

使用 `legend` 标签

备选

试图对齐输入框顶部的文本

Trying to align the text on top of the input box

html

css

bootstrap-4

使用 legend 标签

备选

使用 `legend` 标签