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

Question

我提前抱歉，因为出于保密原因，我无法显示我正在处理的内容的代码/图像，但我想我可以很简单地解释一下。

我有一个<h1>元素作为我网页的标题 - 此标题可以根据用户所在的特定页面的标题更改长度，因此可以说＆＃34;主页＆＃ 34;或者它可以说＆＃34;已保存的项目＆＃34;等等。长度各不相同。

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

我的目标是让下拉列表的大小始终与<h1>的大小相同。目前，宽度是明确的，我已经尝试过“自动”＆＃39;哪个不起作用，自然而且我正在寻找其他的解决方法，但我想我可以在此期间发布。

我使用的是LESS，所以我知道变量很大，可能是将变量作为传递的问题 下拉宽度的值，但我不知道这些变量是否可以基于<h1>的长度动态变化。我是LESS的新手。

我已经浏览了其他一些提出类似问题的帖子，但都没有得到一个非常可靠的解决方案。 Google也没有太大的帮助，大多数文章都谈到了父子尺寸或保持相对宽度/高度。没有比较兄弟姐妹的宽度。

感谢您的帮助！

Answer 1

我试着根据你的描述做一个演示（没有透露治愈癌症的方法）。不确定我是否理解正确，但这就是你所追求的吗？ http://jsbin.com/hekimije/1/edit（jsFiddle关闭:-(）

如果是这样，请允许我解释，因为它实际上非常简单：

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

少

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

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

jsBin中的所有其余代码只是为了让事情更好看。您可以更改标题的长度，然后您会注意到ul。显然你必须悬停标题才能看到ul，毕竟这是一个下拉列表...