沿共享基线垂直对齐相同高度块的文本（支持混合字体大小）

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;
    }