javascript - 列出没有javascript的输入标签的宽度

Question

考虑以下 HTML 片段:

<input><ul>

我们有一个输入标签，后面跟着一个列表。 (该列表将包含实际元素，但为了保持紧凑，我将它们留在此处。)现在，可以使用 CSS 控制列表的宽度，输入标签也是如此。

我想保留输入标签的默认宽度，然后使列表宽度具有匹配的宽度。我当然可以使用 JavaScript 的 getComputedStyle。从理论上讲，如果用户禁用 JavaScript，这会导致问题，但实际上，我实际上正在编写一个(非常简约的)自动完成小部件(就像在维基百科上，但不那么花哨)，所以如果没有 JavaScript，它就无法工作。

但仍然:这可能吗？我对 CSS 基本上一无所知，所以如果这应该是显而易见的，请原谅我。

Answer 1

通常情况下，您会使用设置为 display:table 或 display:table-cell 的包装器元素来执行此操作(哪个无关紧要，一个匿名对象将为另一个创建)以及非常小的指定宽度。包装器的使用宽度将被强制至少与输入框一样宽，然后列表将适合输入框。

(从 Joseph Marikle 的回答中借用的演示 CSS 和 HTML 标记)

.wrapper {
  display: table;
  width:1px;
}

/* for demo only */
ul{list-style-type:none;padding:0;margin:0;background:#ae0}.wrapper{margin-bottom:1em;}

<div class="wrapper">
  <input>
  <ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
  </ul>
</div>
<br>
<div class="wrapper">
  <input>
  <ul>
    <li>test 1</li>
    <li>test 2 tetts 3 stsdgsdf stsdgsdf</li>
    <li>test 3</li>
  </ul>
</div>