" text-align：justify;" inline-block元素？ [英] "text-align: justify;" inline-block elements properly?

问题描述

其他几个问题已经解决了如何最好地应用 text-align：justify 以使inline-block元素均匀分布...例如，我如何*真的*调整HTML + CSS中的水平菜单？

但是，清除inline-block元素行的100％宽度元素由浏览器给出其自己的行。我不知道如何去除空垂直空间，而不在父元素上使用 line-height：0; 。

有关问题的示例，请参见这个小提示

对于使用 line-height：0; 的解决方案，请参见 this fiddle

我使用的解决方案要求将新的 line-height 应用于子元素，但任何先前设置的 line-height 都会丢失。有人知道更好的解决方案吗？我想避免表，以便元素可以包装在必要时，还flexbox因为浏览器支持还没有。

解决方案

更新了未来解决方案信息;

目前的解决方法（IE8 +，FF，Chrome测试）

见这个小提琴。

相关CSS

  .prevNext {
 text-align：justify; 
} 
 
 .prev下一个{
 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％; 
} 
  

说明

在：before 元素之前，底部边距为负的元素的 display：block 的文本向上一行高度，消除了额外的行，但是替换文本。然后使用 inline-block 元素中的 position：relative ，位移被抵消，但没有添加额外的行。

虽然css不能直接访问 line-height unit在 margin-bottom 和顶部设置中的$ c> em c $ c> line-height 作为乘数值。因此 1.2 ， 120％或 1.2em 相对于 line-height ，在计算中使用 em / code>这里是一个好的选择，因为即使 line-height：1.2 被设置，然后 1.2em margin-bottom 和 top 将匹配。良好的编码以标准化网站的外观意味着在某些点 line-height 应该被明确地定义，所以如果使用任何乘法器方法，则等效 em 单位将给出与 line-height 相同的值。如果 line-height 设置为非 - em 长度，例如 px ，而是可以设置。

绝对有一个变量或mixin使用css预处理器，如LESS或SCSS，可以帮助保持这些值匹配适当的 line-height 或javascript可以用于动态读取，但真的， line-height 应该在使用的上下文中知道，

> Kubi的注释指出，html的缩小删除了< a> 元素之间的空格导致对齐失败。标签中的伪空间无效。< a> （但这是预期的，因为空间在 inline-block 元素内发生），a < a> 标签之间添加> < wbr> 对下一行没有必要中断），因此如果需要缩小，则解决方案是一个硬编码的不间断空格字符& nbsp; - 其他空格字元，例如空格和 en space 无法正常工作（令人惊讶的是）。

未来清洁解决方案

解决方案其中 webkit 落后于时间（如第一个写这个）是：

  .prevNext {
 text-align：justify; 
 -moz-text-align-last：justify; 
 -webkit-text-align-last：justify; / *尚未实现，并且不会是* / 
 text-align-last：justify; / * IE * / 
} 
  

它工作在FF 12.0+和IE8 + （在IE7中的bug）。

对于Webkit，从版本39开始（至少可能在早期已经生成），它 没有 > -webkit - 扩展但仅 如果 （可以在 chrome：// flags /＃enable-experimental-web-platform-features 下完成）。谣言是41或42版应该看到完全支持。由于 webkit 还没有无缝支持， 仍然只是部分解决方案。但是，我认为我应该发布，因为它可以有用的一些。

A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?

However, the 100% width element that "clears" the line of inline-block elements is given its own line by the browser. I can't figure out how to get rid of that empty vertical space without using line-height: 0; on the parent element.

For an example of the problem, see this fiddle

For my solution that uses line-height: 0;, see this fiddle

The solution I'm using requires that a new line-height be applied to the child elements, but any previously set line-height is lost. Is anyone aware of a better solution? I want to avoid tables so that the elements can wrap when necessary, and also flexbox because the browser support isn't there yet. I also want to avoid floats because the number of elements being spaced out will be arbitrary.

解决方案

Updated the "Future" solution info below; still not yet fully supported.

Present Workaround (IE8+, FF, Chrome Tested)

See this fiddle.

Relevant 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%;
}

Explanation

The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.

Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.

Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.

UPDATE for minified text (no spaces) issue

Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character  --other space characters like thin space and en space did not work (surprisingly).

Nearing a Future Clean Solution

A solution in which webkit was behind the times (as of first writing this) was:

.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 */
}

It works in FF 12.0+ and IE8+ (buggy in IE7).

For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.

这篇关于&quot; text-align：justify;&quot; inline-block元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！