证明一行html文本填充整行?

时间:2014-04-13 02:30:17

标签: html justify text-justify

我有一个内部链接的导航栏及其高度我现在喜欢它但是我希望按钮均匀分布但text-align:justify;不起作用。 我做错了什么?

http://jsfiddle.net/xuEY6/

4 个答案:

答案 0 :(得分:9)

添加

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

Demo

答案 1 :(得分:1)

您的链接需要width来填充该行。将with指定为%以填充该行

看看这个http://getbootstrap.com/components/#nav-justified

答案 2 :(得分:1)

如果添加到#navigation line:text-align-last:justify;可以正常工作

答案 3 :(得分:0)

如果您可以不用Safari支持,现在可以使用text-align-last属性来解决此问题:

text-align-last: justify;

将此内容应用于任何文本,其最后一行(或仅一行)将被证明是合理的,而常规的text-align属性会影响除最后一行(如果只有一行则不行)之外的所有行。

除Safari之外,所有主要浏览器均支持此功能。 Chrome 47 +,Edge 12 +,Firefox 49+和Opera。甚至IE 5.5+也支持它(!),但是text-align: justify;也必须设置为工作状态。

Safari有一个bug report来跟踪其状态,但是这已经是十年来最好的部分,没有任何更新,因此Apple确实应该尽快加强其游戏。