导航栏链接应该像更高的链接一样高

debugcn 发表于 Dev

卢卡·德托米（Luca Detomi）

我有一个浮动4个链接的导航栏。

虽然每一个的宽度是NAV总宽度的25％，但高度不是固定的，因为链接的文本可能比其他文本长，并且跨2行，如本例所示。

#first-level-navigation .mega-link {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #eaeeee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #cccccc;
    padding: 0;
    text-transform: uppercase;
    width: 25%;
}

#first-level-navigation .mega-link a {
    color: #00643c;
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

我希望较小的链接的高度可以扩展到较高的链接的高度，以防像我这样的情况，如果窗口足够小，则最后一个链接跨度为2行。如何获得它，以px为单位的强制高度？我尝试过，height:100%但没用

卢卡·德托米（Luca Detomi）

几年后，可以使用Flexbox Layout使用新的现代CSS技术解决此问题。

从@Vucko的jsFiddle（在其答案中提出）开始，我对它进行了少许修改，以通过以下方式使用Flexbox：

#first-level-navigation{
    display:flex;
}

.mega-link{
    flex:1;
}

这段代码解决了“等高”问题，但是要保持居中的垂直对齐，也必须使flex都居中.mega-link，因此完整的代码如下：

#first-level-navigation{
    display:flex;
}

.mega-link{
    flex:1;
    display:flex;
    align-items:center;
}

还请注意，Flexbox可以避免对fixed的特定声明width（因此width:25%;可以将其删除，在其功能中用代替flex:1;），因此可以.mega-link通过自动调整每个元素来更容易地更改元素的数量。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev