如何使datalist与输入html的宽度相同答案

【问题标题】：How to make datalist the same width as input html如何使datalist与输入html的宽度相同
【发布时间】：2022-02-15 02:26:55
【问题描述】：

您好，我想知道如何为数据列表和相应的输入提供相同的宽度。我尝试了以下方法：

input {
   width: 100%; 
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
   margin-bottom: 12px;
  }
  datalist,option{
    width: 100%;
  }

<input list="myList"/>
<datalist id="myList">
 <option> This is a great option</option>
</datalist>

当我使用上面的代码时，datalist 不是输入宽度。有谁知道如何制作一个与他所属的输入长度相同的数据列表。提前致谢。

【问题讨论】：

标签： html css input width html-datalist

【解决方案1】：

你可以试试这样的。为每个类分配一个类并使用 CSS 设置样式。

CSS

.input {
       width: 100%; 
       padding: 12px 20px 12px 40px;
       border: 1px solid #ddd;
       margin-bottom: 12px;
      }

.Option {
   width: 100%;
}

HTML

<input list="myList"/>
<datalist id="myList">
 <option class="Option"> This is a great option</option>
</datalist>

它可能会给你想要的结果。

【讨论】：

没有.input类的元素。
不幸的是试过它不起作用，但你的评论有时很有用。