我有一个具有以下结构的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
如您所见,我还必须浮动它们,以消除它们之间的空间。如果您不希望有任何浮点数,请在计算宽度时考虑空格。