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

Question

预先感到抱歉，因为出于机密性原因，我无法显示正在处理的代码/图像，但是我认为我可以很简单地进行解释。

我有一个<h1>充当网页标题的元素-该标题的长度可以根据用户所在的特定页面的标题而变化，因此它可以说“首页”或“保存的项目”，等等。长度各不相同。

该<h1>有一个兄弟元素，一<ul>，充当下拉导航到这些其他网页。

我的目标是使下拉列表的大小始终与相同<h1>。目前宽度是明确的，我尝试了“自动”，但自然不起作用，现在正在寻找其他解决方法，但我认为自己可以在此发布。

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

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

感谢您的协助！

Answer 1

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

如果是这样，请允许我解释一下，因为实际上很简单：

• h1在你的和周围添加一个包装纸ul
  • 向左浮动以使其占据内容的宽度
  • 给它一个相对位置，这样你就可以用它来定位你的ul对手
• ul绝对 定位
  • 给它的 left 和 right 为 0，使其与父级具有相同的宽度
  • 给它一个 100% 的顶部，从其父级的底部边缘开始

此方法确实将您的 ul 移出文档流，但对于通常需要的下拉列表，因此这不应该是问题。

以及完整的代码：

超文本标记语言

  <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，毕竟它是一个下拉菜单......