如何将多行 Headers 与CSS中的 Headers 基线对齐-Java 学习之路

我试图在大型菜单中对齐 Headers 的基线时遇到问题 .

/* Presentational bits */

.add-divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 0.65em;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.standard-list {
  list-style-type: none;
  padding-left: 0;
  list-style: none;
}


/* Core Styling */

.mega-menu-wrapper {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
  grid-gap: 10px;
  align-items: baseline;
}

<nav>
  <ul class="mega-menu-wrapper">
    <li class="mega-menu-item">
      <h5 class="add-divider">Typical Section Header</h5>
      <ul class="standard-list">
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
      </ul>
    </li>
    <li>
      <h5 class="add-divider">Atypical Section Header with much longer content in it that breaks to another line</h5>
      <ul class="standard-list">
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
      </ul>
    </li>
    <li>
      <h5 class="add-divider">How to accomodate different sized sections Headers?</h5>
      <ul class="standard-list">
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
      </ul>
    </li>
    <li><h5 class="add-divider">The section dividers should line up</h5>
      <ul class="standard-list">
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
      </ul></li>
    <li>
      <h5 class="add-divider">No matter the content of the headers</h5>
      <ul class="standard-list">
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
        <li><a href="#">Link to nowhere</a></li>
      </ul>
    </li>
  </ul>
</nav>

如图所示，我有一个导航，里面导航是一个无序列表，每个列表项内部是一个 Headers ，它是自己的无序导航项列表 . 为了美观的目的，每个 Headers 都有自己的底部边框，并将 Headers 与链接分开 .

问题是我无法对齐这些底部边框，这些是 Headers 上的样式 . 我认为使用CSS Grid这将是一个非常简单的任务，但也许我使用错误的东西来设置这个菜单的样式，或者我对一些CSS Grid功能一无所知 .

All in all 我只是想对齐这些 Headers 的基线，即使它们分成多行 .

我查看了以下资源，但没有一个与我的用例对齐，但我不能成为唯一一个有这个问题的人，或者它比我想象的更容易解决，我忽略了一些东西 . 无论哪种方式，这是我试图无济于事的：

HTML heading alignment issues
CSS Vertical Align Baseline HTML Headings
html - Horizontally aligning blocks on text baseline
html - align headings to same baseline, regardless following text
我的Google搜索结果中有更多紫色链接

任何帮助深表感谢 .

CodePen Example

更新

我希望能够支持可变数量的链接，因为这是一个超级菜单，我不知道用户将添加多少链接 .

我意识到现在我的HTML结构可能无法完成 . I am open to exploring new ways of structuring the HTML as long as I can have 4 columns of menu items before the 5th breaks to a new line.

2 回答

Here你是

CSS更新

/* Presentational bits */
.add-divider {
  margin-bottom: 7px;
  margin-top: auto; 
}

.standard-list {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 5px;
  padding-left: 0;
}

/* Core Styling */
.mega-menu-wrapper {
  display: flex;
  width: 600px;
  flex-wrap: wrap;
  align-items: stretch;
}

.mega-menu-wrapper li {
  width: 180px;
  flex-grow: 1;
  margin: 2px 10px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.mega-menu-wrapper li ul{
  margin-bottom: auto;
}

回答评论＃2

我担心在这种“边缘”的情况下，这种布局是不是100％可能 . 但是你可以做以下事情：

使用JS
目标最长的字符串
得到它的高度
将此高度设置为其他 h 标记
仍然是css但可能很难看
到任何长 h 添加 class="long" 并添加提供的css .mega-menu-wrapper li.long {flex-basis: 100%;}
Kinda "hack" - 获取最长列表项的计数并添加空列表项（如果使用前端框架，则可能很好 - 如果使用前端框架）角度示例：

list.component.html

...
  <li class="mega-menu-item">
      <h5 class="add-divider">Typical Section Header</h5>
      <ul class="standard-list">
        <li *ngFor="let i of arrayOfNumbers0toMax">
            <a href="{{linksAtN[i].link}}">{{linksAtN[i].linkName}}</a>
        </li>
      </ul>
    </li>
...

我也在这个答案中更新了CSS并添加了

.mega-menu-wrapper li ul{
  margin-bottom: auto;
}

并删除 .add-divider .add-divider

我也追加link to CSS fixed example .

回复于 2024-04-30T03:13:45+08:00

由于每个 Headers 都位于不同的 li 内，因此您无法在不定义高度值的情况下对齐它们 .

However, you could fix this issue using some JavaScript:

(function() {
  var headings = document.querySelectorAll('.add-divider'),
      sizes = [];

  headings.forEach(function(el) {
    sizes.push(el.offsetHeight); 
  });

  for (let i = 0; i < headings.length; i++) {
    headings[i].style.minHeight = Math.max(...sizes) + 'px'; 
  }
})();

(The jQuery version)

$(function(){
  var sizes = [];

  $('.add-divider').each(function() {
    sizes.push($(this).outerHeight()); 

  }).css('minHeight', Math.max(...sizes) );
});

Your CodePen example updated

回复于 2024-04-30T03:13:45+08:00

如何将多行 Headers 与CSS中的 Headers 基线对齐

更新

2 回答

回答评论＃2

相关问题