沿共享基線垂直對齊相同高度塊的文本（支持混合字體大小）

Question

我有一個單行/行導航/菜單，其中一些項目的字體大小較大，但我希望所有項目的文本沿基線與和諧對齊。

我還需要這些項目在菜單的整個高度上對 hover 做出反應，這樣用戶就不必瞄准較小的文本（這是子菜單，但不是這個問題的一部分）。

我嘗試使用 Flexbox 但我不能混合使用align-items: stretch (full height) 和align-items: baseline (文本對齊)

注意：菜單項的文本位於menu-item-label包裝器中，因為我將向項目添加更多內容（下拉箭頭、圖片...），但重要的是文本 alignment。

 body { font-size: 24px; /* Big value to ease highlighting of mis-alignemnt */ }.some-existing-container { /* This container has some dimensions: I don't think it would cause conflict. */ width: 100%; height: 4em; display: flex; align-items: center; /* Not mandatory */ border: 1px solid blue; /* Highlighting */ }.menu { display: flex; align-items: baseline; border: 1px solid green; /* Highlighting */ }.menu-item { border: 1px dotted brown; /* Highlighting */ }.menu-item:hover { background-color: grey; /* Highlighting */ }.menu-item-label { border: 1px dotted pink; /* Highlighting */ }.other { margin-left: auto; /* Places this block to the right in.some-existing-container */ border: 1px solid purple; /* Highlighting */ }.bigger { font-size: 4rem; }.stretched { align-items: stretch; }

 <p>Variant 1: Texts are aligned but items does not occupies the whole height:</p> <div class="main"> <div class="some-existing-container"> <div class="menu"> <div class="menu-item"> <div class="menu-item-label"> Home </div> </div> <div class="bigger menu-item"> <div class="menu-item-label"> Item1 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item2 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item3 </div> </div> </div> <div class="other"> Other </div> </div> </div> <p>Variant 2: Items of same-and-full height but texts are not aligned:</p> <div class="main"> <div class="some-existing-container"> <div class="menu stretched"> <div class="menu-item"> <div class="menu-item-label"> Home </div> </div> <div class="bigger menu-item"> <div class="menu-item-label"> Item1 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item2 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item3 </div> </div> </div> <div class="other"> Other </div> </div> </div>

我想將兩者混合為下面的蒙太奇：

甚至有可能（有或沒有 JavaScript）嗎？

我也嘗試過使用 Grid 布局但沒有成功（請參閱此 JSFiddle ）。

Answer 1

我會保留基線 alignment 並考慮使用偽元素技巧來增加可懸停區域：

 body { font-size: 24px; /* Big value to ease highlighting of mis-alignemnt */ }.some-existing-container { height: 4em; display: flex; align-items: center; border: 1px solid blue; }.menu { display: flex; align-items: baseline; border: 1px solid green; overflow:hidden; }.menu-item { border: 1px dotted brown; position:relative; z-index:0; }.menu-item::before { content:""; position:absolute; z-index:-1; top:-200px; bottom:-200px; left:0; right:0; }.menu-item:hover, .menu-item:hover::before{ background-color: grey; }.menu-item-label { border: 1px dotted pink; }.other { margin-left: auto; border: 1px solid purple; }.bigger { font-size: 4rem; }

 <div class="main"> <div class="some-existing-container"> <div class="menu"> <div class="menu-item"> <div class="menu-item-label"> Home </div> </div> <div class="bigger menu-item"> <div class="menu-item-label"> Item1 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item2 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item3 </div> </div> </div> <div class="other"> Other </div> </div> </div>

Answer 2

這是我稍微修復了您的 css 后的結果。

 body { font-size: 24px; /* Big value to ease highlighting of mis-alignemnt */ }.some-existing-container { /* This container has some dimensions: I don't think it would cause conflict. */ width: 100%; height: 4em; display: flex; align-items: center; /* Not mandatory */ border: 1px solid blue; /* Highlighting */ }.menu { display: flex; align-items: baseline; /* Add this css */ height: 4rem; /////////////// border: 1px solid green; /* Highlighting */ }.menu-item { border: 1px dotted brown; /* Highlighting */ /* Add this css */ display: flex; align-items: center; ////////////////// }.menu-item:hover { background-color: grey; /* Highlighting */ }.menu-item-label { border: 1px dotted pink; /* Highlighting */ }.other { margin-left: auto; /* Places this block to the right in.some-existing-container */ border: 1px solid purple; /* Highlighting */ }.bigger { font-size: 4rem; }.stretched { align-items: stretch; }

 <p>Variant 1: Texts are aligned but items does not occupies the whole height:</p> <div class="main"> <div class="some-existing-container"> <div class="menu"> <div class="menu-item"> <div class="menu-item-label"> Home </div> </div> <div class="bigger menu-item"> <div class="menu-item-label"> Item1 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item2 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item3 </div> </div> </div> <div class="other"> Other </div> </div> </div> <p>Variant 2: Items of same-and-full height but texts are not aligned:</p> <div class="main"> <div class="some-existing-container"> <div class="menu stretched"> <div class="menu-item"> <div class="menu-item-label"> Home </div> </div> <div class="bigger menu-item"> <div class="menu-item-label"> Item1 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item2 </div> </div> <div class="menu-item"> <div class="menu-item-label"> Item3 </div> </div> </div> <div class="other"> Other </div> </div> </div>

Answer 3

您是否嘗試過使用 CSS 網格布局？ https://www.w3schools.com/css/css_grid.asp

更新：

抱歉，我沒有注意到您已經嘗試過網格布局。 但我確實認為可以通過網格布局來實現。

您介意發布代碼的網格布局版本嗎？ 我也許可以幫助你。

謝謝

Answer 4

• 因為您的包裝“菜單”沒有自己的高度，所以為它設置高度，例如：

    .menu {
      height: 4rem;
      align-items: stretch
    }

• 接下來，您應該添加“菜單項”：

    .menu-item {
      display: flex;
      align-items: center;
    }