“文本对齐：证明;” inline-block的元素是否正确？(“text-align: justi

-->

“文本对齐：证明;” inline-block的元素是否正确？(“text-align: justi

2019-06-17 12:00发布

站内文章 / 前沿技术

107 0

叛逆

女 | 书童

私信

其他一些问题已经解决了如何最好地应用text-align: justify让inline-block的元素传播出去均匀......例如，如何真的* *证明在HTML + CSS水平菜单？

然而，“清除”内联块元件的线的100％的宽度元件被给予由浏览器自己的行。我无法弄清楚如何让不使用摆脱空的垂直空间line-height: 0; 父元素。

对于这个问题的一个例子，看看这个小提琴

对于我的解决方案使用line-height: 0; ，看到这个小提琴

我使用的解决方案需要一个新line-height可以应用到子元素，但以前设置line-height丢失。有没有人知道一个更好的解决方案？我想避免的表，这样的元素可以在必要时包裹，也Flexbox的，因为浏览器的支持还没有。我也想避免彩车因为间隔出元素的数量将是任意的。

Answer 1:

更新了“未来”解决方案如下信息; 还未完全支持。

目前解决方法（IE8 +，FF，Chrome浏览器测试）

看到这个小提琴。

相关CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

说明

的display: block上:before与负底部边缘元件拉动文本行上移一行的高度，它消除了额外的线，但移位的文本。然后用position: relative所述inline-block元件的位移被抵消，但不添加额外的线回来。

虽然CSS不能直接访问一个line-height “单元”本身，使用em在margin-bottom和top设置容易适应任何line-height给定为一体的乘数值。所以1.2 ， 120%或1.2em都在计算等于 就line-height ，这使得使用em一个很好的选择在这里，因为即使line-height: 1.2设置，然后1.2em为margin-bottom而top将匹配。良好的编码正常化一个网站的外观在某些时候意味着line-height应该明确定义，因此，如果任何的乘数方法时，则相当于em单位将给予相同的值line-height 。如果line-height被设置为一个非em的长度，如px ，即代替可以设置。

绝对具有可变或使用CSS预处理器，如混入LESS或SCSS可以帮助保持这些值匹配适当的line-height ，或JavaScript可以用来动态地读取这样的，但实际上，该line-height应在上下文中已知在哪里这是正在使用，并且适当的设置本地制造的。

更新精缩的文字（不计空格）问题

库比什的评论指出，去除之间的空间的HTML的微小<a>元素引起的理由失败。甲的内伪空间<a>标签没有帮助（但预计，随着该空间的内部发生inline-block元件）， <wbr>之间加入<a>标签没有帮助（可能是因为断没有必要到下一行），因此，如果缩小是期望的，则该解决方案是硬编码的不间断空格字符  像-其他空格字符狭窄的空间和连接空间没有工作（奇怪）。

接近一个未来的清洁解决方案

的溶液，其中webkit是落伍了（作为第一写入的这个）为：

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

它的工作原理在FF 12.0以上版本以及IE8 + （在IE7越野车）。

对于Webkit的，作为39版（至少，有可能在早期蹑手蹑脚），它支持它没有 -webkit-但只有当用户启用了实验性的功能 （可在完成扩展chrome://flags/#enable-experimental-web-platform-features ）。传闻是，41版或42应该看到的完全支持。由于它不通过无缝支持webkit还没有， 它仍然是只能解决部分问题 。不过，我想我应该张贴它，因为它可以为一些有益的。

Answer 2:

考虑以下：

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

（另见编辑的小提琴。）那是你在找什么？这种技术的好处是，你可以添加更多的项目，这些项目都将被自动居中。所有现代Web浏览器支持。

Answer 3:

首先，我喜欢的方式pseudo-element以保持标记的语义。我想你应该与整体的方式坚持下去。这远远不是诉诸表，不必要的标记更好，或者在上面的脚本来获取定位数据。

给大家强调有关text-align是哈克-来吧！这是更好的HTML是在CSS不是相反的代价语义。

所以，从我的理解，你想实现这个合理的inline-block的效果，而不必担心重置line-height每一次吧？我主张，只需添加

.prevNext *{
    line-height: 1.2;  /* or normal */
}

然后你可以去编码，仿佛什么都没有发生。这里是保罗爱尔兰的有关报价*如果你担心性能的选择：

” ......你不能关心的*除非您连接所有您的JavaScript性能，有它在底部，再压缩你的CSS和JS，GZIP您的所有资产，以及无损压缩的所有图片。如果你不是活得牛逼得到90+的Page Speed分数，它的方式还为时过早想着选择的优化。”

希望这可以帮助！

-J科尔莫里森

Answer 4:

尝试text-align对于这个问题是相当的hackish。的text-align属性是指以对齐的块（具体文本）的内联内容-这并不意味着以对准HTML元素。

据我所知，你正试图避免浮动，但在我看来花车来完成你正在尝试做的最好的方式。

Answer 5:

在您的例子中，你必须line-height:1.2 ，没有一个单位。这可能会导致问题。如果你不使用的边界，你可以给家长和孩子们line-height的0 。

我能想到的其他选项：

使用display:table父和display:table-cell对孩子进行模拟表样的行为。而你靠左的第一个项目，最后一个正确。看到这个小提琴。
使用JavaScript做导航孩子的计数，然后给他们一个均匀分布的宽度。例如。 4个孩子，25％ width的每个。并调整左，右分别在第一和最后一个项目。
有一种方法均匀分布的项目，但需要一些非打破空间被小心地放置在html与阴性切缘和沿迂回方法text-align:justify 。你可以尝试并适应它的nav元素。例如参见这里。

Answer 6:

你的小提琴是非常具体的。在我看来，你的情况下，这个CSS将工作做好：

.prevNext {
    border: 1px solid #ccc;
    position: relative;
    height: 1.5em;
}

.prevNext a {
    display: block;
    position: absolute;
    top: 0;
}

.prevNext a:first-child {
    left: 0;
    text-align: left;
}
.prevNext a:last-child {
    right: 0;
    text-align: right;
}

Answer 7:

正如@Scotts说明，以下已Chrome中实现的，而-webkit的一部分，我真的很喜欢顺便说一句，特别是因为我们需要摆脱的-browser-specific-shǐt真正很快。

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE + Chrome */
}

注：虽然仍是Safari和Opera 不支持它尚未（08-SEPT-16）。