只使用CSS使相邻兄弟元素具有相同的宽度

Question

很抱歉，由于保密原因，我不能展示我正在工作的代码/图片，但我认为我可以简单地解释一下。

我有一个 <h1> 元素，它作为我的网页标题 - 这个标题的长度会根据用户所在页面的标题而改变，所以它可能会显示“主页”或“保存的项目”等不同内容。长度是不同的。

<h1> 有一个兄弟元素，即一个 <ul>，它用作下拉菜单以导航到其他页面。

我的目标是始终使下拉列表与 <h1> 的大小相同。当前宽度是明确的，我尝试过 'auto'，但它并没有起作用，自然地寻找其他方法，但是与此同时我想在这里发帖。

我使用 LESS，所以我知道变量非常重要，这可能涉及将变量作为下拉菜单宽度的值传递，但我不知道这些变量是否可以基于 <h1> 的长度是动态的。我是 LESS 的新手。

我浏览了几篇其他类似问题的帖子，但没有得到很好的解决方案。Google 也没有太多帮助，大多数文章都讲述了父子大小或保持宽度/高度相对。没有涉及兄弟元素宽度的比较。

谢谢您的任何帮助！

- alex.mo.07

---

真的吗？你不能展示一些带有占位文本的 <li> 或 <a> 吗？你并不需要发布 <li>在这里治愈癌症，不要偷</li>。 - Marc B

CSS并不能实现这个功能。CSS无法检测到一个元素的宽度并将其应用于兄弟元素。如果第二个元素是绝对定位的子元素...那么可以实现。个人建议使用JS/Jq。 - Paulie_D

那是我的顾虑，试图看看是否可以避免使用JS。哦好吧。谢谢@Paulie_D - alex.mo.07

Answer 1

我按照您的说明制作了一个演示（不透露治愈癌症的方法）。不确定我是否理解正确，但这是否是您想要的内容？（jsFiddle已经关闭 :-( ）http://jsbin.com/hekimije/1/edit 如果是的话，让我来解释一下，因为它实际上相当简单：

- 在您的 h1 和 ul 周围添加一个包装器 - 左浮使其占据其内容的宽度 - 给它一个相对位置，以便您可以将其用于定位 ul - 绝对定位 ul - 给它0的左侧和右侧，使其与其父级具有相同的宽度 - 给它100％的顶部以从其父级底部开始

此方法确实将您的 ul 从文档流中移除，但对于下拉菜单来说，通常需要这样做，因此这不应该是问题。

完整代码如下： HTML

  <div id='title-wrapper'>
    <h1>Some title</h1>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul> 
  </div>

Less

#title-wrapper {
  float: left; 
  position: relative;

  ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; 
  }
}

在jsBin中的其余代码只是为了使事情更加清晰。您可以更改标题的长度，您会注意到

标签跟随变化。显然，您必须将鼠标悬停在标题上才能看到
标签，因为它是一个下拉菜单...

- Pevara