Question

考虑以下HTML代码段：

<input><ul>

我们有一个输入标签，后面是一个列表。（该列表将包含实际项目，但为了保持紧凑，我将它们留在这里。）现在，可以使用CSS控制列表的宽度，同样也可以控制输入标记。

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

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

Answer 1

如果您对使用较新的CSS标准不太反感，我建议使用flexbox。它适应两种方式，确保两个元素的宽度相同，而无需设置或计算显式值。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通常情况下，您可以使用设置为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>

Answer 3

尝试

<ul style = "width: 40px"> //将40px更改为匹配的宽度

在没有javascript的情况下列出输入标记的宽度

3 个答案: