在输入字段下对齐 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>

Answer 2

你可以试试这个：将输入和选择放在一个容器 div 中

#input-field {
  width: 100%
}

label {
  float: left
}

.ct-input {
  width: 220px;
  float: left;
}

.datalist-wrapper {
  width: 100%
}

.datalist-wrapper select {
  width: 100%;
}

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

jsFiddle：https://jsfiddle.net/8kqz4gqg/