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

概述嗨,我有以下代码： <div class="hint-wrapper"> <form> <label>Suggestions:</label> <input type="text" id="input-field"> <div class="datalist-wrapper"> <select class="avail 嗨,我有以下代码：

<div >    <form>        <label>Suggestions:</label>        <input type="text" ID="input-fIEld">        <div >            <select  multiple=""></select>        </div>    </form></div>

它看起来像这样：

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

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

.dataList-wrapper {    float: left;}#input-fIEld {    float: left;}

我想实现这个目标：

解决方法 包裹输入并选择div周围的元素,应用位置：相对于父和位置：绝对到子(选择)元素,以便它可以调整父元素的宽度.

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

<div >  <form>    <label>Suggestions:</label>    <div ID="input">      <input type="text" ID="input-fIEld" />      <div >        <select  multiple="">          <option>a1</option>          <option>a2</option>          <option>a3</option>          <option>a4</option>          <option>a5</option>        </select>      </div>    </div>  </form></div>

总结

以上是内存溢出为你收集整理的html – 在输入字段下对齐div(选择列表)全部内容，希望文章能够帮你解决html – 在输入字段下对齐div(选择列表)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。