Question

我有一个导航栏，其中有4个链接浮动。

虽然每一个的宽度是净重总宽度的25％，但高度并不固定，因为链接的文本可能比其他文本长，跨越2行，如 this example

#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%，但它没有用处

Answer 1

您可以使用display:table/table-cell：

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

.mega-link{
    display:table-cell;
    vertical-align:middle;
}

JSFiddle

Aslo，您必须为box-sizing: border-box - here's a good article about it by Paul Irish添加浏览器前缀。

Answer 2

使用jQuery（在Coffeescript中）：

if $('html').length > 0
    link = $('.mega-link')

    # Determine heights
    link_height = link.height()

    # Applys heights
    link.css "height", link_height

    # when window resizes, calculate and apply again 
    $(window).on 'resize', ->
        # re-determine height
        link_height = link.height()

        # Apply heights
        link.css "height", link_height

Answer 3

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

从 @Vucko 的jsFiddle（在其答案中提出）开始，我slightly modified it以以下方式使用Flexbox：

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

.mega-link{
    flex:1;
}

此代码解决了“ 等高”问题，但要保持居中的垂直对齐，还必须使每个.mega-link都具有柔韧性，因此完整的代码如下：

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

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

请注意，Flexbox可以避免对固定的width进行声明（这样可以删除width:25%;，并用flex:1;替换其功能），因此更容易更改.mega-link个元素，每个元素都会自动适应。

Navbar链接应该像高个子一样高

3 个答案: