html - 如何使下拉列表 和 具有相同的宽度

Question

我创建了一个如下所示的下拉列表

 <ul id="drop-nav">   
  <li>
    <a href="#">Web Design</a>        
  <ul>         
  <li> <a href="#">HTML</a></li>          
  <li><a href="#">CSS</a></li>          
  <li><a href="#">JavaScript</a></li>        
</ul>      
</li>    
</ul>

这里我希望下拉名称 [here web design] 和下拉列表具有相同的宽度。因此，如果我将列表中的“Javacript”更改为“我想学习 Javascript”，那么它也应该更改 Web 设计宽度。现在两者都是独立的。我不想设置 width:100% ，我想根据内容长度更改大小。现在两者都在独立变化。我希望两者同时发生变化。

下面是plunker代码，请帮我做一下

https://plnkr.co/edit/?p=preview

Answer 1

我认为您无法仅使用 CSS 更改(网页设计)元素的大小，因为它是您希望动态化的其他元素的“兄弟”。如果您将 display: inline-block 添加到作为其他元素父元素的第一个 li 元素，那么该元素将调整为其他元素的宽度。

如果确实需要，您可以在其他字段发生变化时使用 JavaScript 来调整网页设计标签的宽度。