将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;
}

我想实现这个：

- coder

---

能够更改 HTML 吗？ - Aziz

是的，这是可能的 @Aziz - coder

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>

- Weafs.py

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/

- fdfey

---

谢谢！这看起来非常不错，但是选择列表的宽度与输入字段并不完全相同，就像您在这里看到的：https://i.imgur.com/lHNBTdC.png - coder