我有一个具有以下结构的div:

<div id="navigation">
    <a href="#">Overview</a>
    <a href="#">Test</a>
    <a href="#">test 2</a>
</div>


显示如下内容:



现在,我有了一个jquery代码,可在“导航”中附加元素。问题是,我不知道如何使它看起来像这样:



..尤其是链接标签很多时。

这是“导航”的CSS

#navigation{
    background: #efefef;
    height: 40px;
    width: 732px;
}


对于标签:

#navigation a{
   min-width: 108px;
   padding: 11px;
   display: inline-block;
   text-align: center;
}


谢谢。

最佳答案

首先,您需要max-width而不是min-width的链接。或者,如果您始终希望将它们在父对象上均匀分布,只需width
此宽度需要由您计算,因为浏览器本身无法做到这一点。在我们的示例中,有3个链接,因此每个链接的宽度需要为100/3 = 33.3%。

然后,还有其他样式(例如文本溢出)来处理省略号,您最终会得到以下结果:

#navigation a{
   width: 33.3%;
   float:left;
   padding:11px;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   display:inline-block;
   text-align:center;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}


jsFiddle

如您所见,我还必须浮动它们,以消除它们之间的空间。如果您不希望有任何浮点数,请在计算宽度时考虑空格。

10-05 20:56
查看更多