如何实施像谷歌浏览器一样的自动完成下拉菜单？

Question

我正在尝试在HTML和CSS中实现自定义下拉自动填充建议列表。我基本上希望它看起来像Chrome（见下文）。

为了实现这一点，我尝试使用一个绝对位于输入元素下方的表。然后，我在vertical-align: middle;元素上使用td，在第二个text-align: right;元素上使用td。只要桌子自动确定自己的宽度，一切看起来都很棒。问题在于，当我在表上设置min-width时，它始终至少与输入一样宽。此时，第二个td右侧有空格。我已经尝试将第二个td设置为向右浮动，或者将其绝对定位在右侧，但没有任何效果。首先，如果我尝试其中任何一个，vertical-align: middle;似乎不再有效。其次，通过绝对定位，我得到两个td元素有时重叠。

有没有人有像Chromes一样的外观/功能的解决方案？理想情况下，我不想使用JavaScript动态更改样式。我也不想硬编码元素高度/宽度，因为我希望它足够灵活，易于设计。

Answer 1

@Chris，我似乎无法重现你的问题。最小宽度也会扩展表格和行/列。

＆＃13;

＆＃13;

div {
  background-color: red;
}

table {
  min-width: 300px;
  background-color: green;
}

td {
  vertical-align: middle;
}

td ~ td {
  background-color: white;
  text-align: right;
}

＆＃13;

<div>
  <table>
    <tr>
      <td>first Col 1</td>
      <td>Second Col 1</td>
    </tr>
    <tr>
      <td>first Col 2</td>
      <td>Second Col 2</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;