Html 在输入字段下对齐div（选择列表）

嗨，我有以下代码：

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

我想实现这一点：

---

您可以尝试这样做：将输入和选择放入容器div中

#输入字段{
宽度：100%
}
标签{
浮动：左
}
.ct输入{
宽度：220px；
浮动：左；
}
.datalist包装器{
宽度：100%
}
.datalist包装器选择{
宽度：100%；
}

建议：

将

输入

和

选择

元素环绕在

div

周围，将

位置：相对

应用于父元素，将

位置：绝对

应用于子元素（

选择

）元素，以便它可以调整父元素的宽度

#输入{
位置：相对位置；
显示：内联块；
}
.datalist包装器{
位置：绝对位置；
左：0；
宽度：100%；
}
.datalist包装器选择{
宽度：100%；
}

建议：
a1
a2
a3
a4
a5

是否可以更改HTML？是的，这可能是@AzizTransks！这看起来非常好，但选择列表的宽度与输入字段的宽度不完全相同，您可以在此处看到：

.datalist-wrapper {
    float: left;
}

#input-field {
    float: left;
}