在输入字段下对齐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 element）。它也应该与输入字段具有相同的宽度。

我已经尝试了几个这样的CSS：

.datalist-wrapper {
    float: left;
}

#input-field {
    float: left;
}

我想实现这个目标：

Answer 1

围绕input包裹select和div元素，将position: relative应用于父级，将position: absolute应用于子级（select）元素因此它可以调整父元素的宽度。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/