我在对齐大型菜单中的标题基线时遇到问题。
/* 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>
如图所示,我有一个导航,该导航内部是一个无序列表,每个列表项内部是一个标题,它是导航项自己的无序列表。出于审美目的,每个标题都有自己的底部边框,并将标题与链接分开。
问题是我无法对齐这些底部边框,即标题上的样式。我以为使用CSS Grid会是一个非常简单的任务,但是也许我使用了错误的样式来设置此菜单,或者我不知道某些CSS Grid功能。
所有,我只想对齐这些标题的基准线,即使它们分成多行。
我查看了以下资源,但没有一个与我的用例相符,但是我不能成为唯一一个遇到此问题的人,否则它比我想象的要容易解决,并且我正在忽略一些东西。无论哪种方式,这都是我尝试都没有用的:
非常感谢您的帮助。
我希望能够支持可变数量的链接,因为这是一个超级菜单,所以我不知道用户将向其中添加多少个链接。
我意识到这可能无法通过现在的HTML结构来完成。 只要在第5行换行之前可以有4列菜单项,我就会探索结构HTML的新方法。
答案 0 :(得分:2)
由于每个标题都位于不同的Success: Tests passed.
中,因此您无法在不定义高度值的情况下对齐它们。
但是,您可以使用一些JavaScript来解决此问题:
li
(jQuery版本)
(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';
}
})();
答案 1 :(得分: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;
}
在这种“边缘”情况下,恐怕不可能100%拥有这种布局。但是您可以执行以下操作:
使用JS
h
标签仍然是CSS,但可能很丑
h
添加class="long"
并添加提供的CSS .mega-menu-wrapper li.long {flex-basis: 100%;}
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;
}
并从display: flex
中删除了.add-divider