僅使用CSS使相鄰的兄弟元素具有相同的寬度

Question

我很抱歉，因為保密原因我無法顯示我正在處理的代碼/圖像，但我想我可以很簡單地解釋一下。

我有一個<h1>元素作為我的網頁的標題 - 這個標題可以根據用戶所在的特定頁面的標題來改變長度，所以它可以說“主頁”或它可以說“已保存的項目”等長度各不相同。

<h1>有一個兄弟元素，一個<ul> ，作為下拉列表導航到這些其他頁面。

我的目標是使下拉列表的大小始終與<h1>相同。 目前寬度是顯而易見的，我已經嘗試過“自動”，但是我現在正在尋找其他解決方法，但我想我可以在此期間發布。

我使用LESS，所以我知道變量很大，可能是將變量作為下拉寬度的值傳遞，但是我不知道這些變量是否可以基於<h1>的長度動態。 我是LESS的新手。

我瀏覽了幾個其他帖子，詢問類似的問題，但沒有一個得到一個非常可靠的解決方案。 谷歌也沒有太大的幫助，大多數文章都談到了父子尺寸或保持寬度/高度相對。 不比較兄弟姐妹的寬度。

謝謝你的幫助！

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 ，畢竟它是一個下拉列表...