html - 在输入字段下对齐 div(选择列表)

Question

您好，我有以下代码:

<div class="hint-wrapper">
    <form>
        <label>Suggestions:</label>
        <input type="text" id="input-field">
        <div class="datalist-wrapper">
            <select class="availableDataSelection" multiple=""></select>
        </div>
    </form>
</div>

看起来像这样:

现在我想在输入字段下对齐选择列表(datalist-wrapper 元素)。它还应与输入字段具有相同的宽度。

我已经尝试过几个像这样的 CSS 东西:

.datalist-wrapper {
    float: left;
}

#input-field {
    float: left;
}

我想实现这个:

Answer 1

将 input 和 select 元素包裹在 div 周围，将 position: relative 应用到父级和 position: absolute 到子 (select) 元素，这样它就可以适应父元素的宽度。

#input {
  position: relative;
  display: inline-block;
}
.datalist-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
}
.datalist-wrapper select {
  width: 100%;
}

<div class="hint-wrapper">
  <form>
    <label>Suggestions:</label>
    <div id="input">
      <input type="text" id="input-field" />
      <div class="datalist-wrapper">
        <select class="availableDataSelection" multiple="">
          <option>a1</option>
          <option>a2</option>
          <option>a3</option>
          <option>a4</option>
          <option>a5</option>
        </select>
      </div>
    </div>
  </form>
</div>