CSS “文本对齐：对齐；” 内联块元素是否正确？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11589590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"text-align: justify;" inline-block elements properly?
提问by thirdender
A few other questions have already addressed how best to apply text-align: justifyto get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?
其他一些问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布……例如，我如何*真正*证明 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.
但是，浏览器会为“清除”行内块元素行的 100% 宽度元素指定自己的行。我不知道如何在不使用line-height: 0;父元素的情况下摆脱那个空白的垂直空间。
For an example of the problem, see this fiddle
有关问题的示例，请参阅此小提琴
For my solution that uses line-height: 0;, see this fiddle
对于我使用的解决方案line-height: 0;，请参阅此小提琴
The solution I'm using requires that a new line-heightbe applied to the child elements, but any previously set line-heightis 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.
我使用的解决方案要求line-height对子元素应用一个新的，但之前设置的任何内容都将line-height丢失。有人知道更好的解决方案吗？我想避免使用表格，以便元素可以在必要时换行，还想避免使用 flexbox，因为尚不支持浏览器。我也想避免浮动，因为被隔开的元素数量是任意的。
回答by ScottS
Updated the "Future" solution info below; still not yet fully supported.
更新了下面的“未来”解决方案信息；还没有完全支持。
Present Workaround (IE8+, FF, Chrome Tested)
目前的解决方法（IE8+、FF、Chrome 测试）
Relevant CSS
相关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: blockon the :beforeelement 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: relativeon the inline-blockelements the displacement is counteracted, but without adding the additional line back.
在display: block上:before有负下边距元素拉文达一行的高度，它消除了多余的线的线，但是置换文本。然后position: relative在inline-block元素上抵消位移，但不添加额外的线。
Though css cannot directly access a line-height"unit" per se, the use of emin the margin-bottomand topsettings easily accommodates any line-heightgiven as one of the multiplier values. So 1.2, 120%, or 1.2emare all equalin calculation with respect to line-height, which makes the use of ema good choice here, as even if line-height: 1.2is set, then 1.2emfor margin-bottomand topwill match. Good coding to normalize the look of a site means at some point line-heightshould be defined explicitly, so if any of the multiplier methods are used, then the equivalent emunit will give the same value as the line-height. And if line-heightis set to a non-emlength, such as px, that instead could be set.
尽管 css 本身不能直接访问line-height“单位”，但em在margin-bottom和top设置中的使用很容易容纳任何line-height给定的乘数值之一。所以1.2, 120%, or在计算上对于1.2em都是相等的，这使得这里的使用是一个很好的选择，因为即使设置了，那么for和也会匹配。良好的编码来规范网站的外观意味着在某些时候应该明确定义，所以如果使用任何乘法器方法，那么等效单位将给出与. 如果设置为非line-heightemline-height: 1.21.2emmargin-bottomtopline-heightemline-heightline-heightem长度，例如px，而是可以设置。
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-heightshould be known in the context of where this is being used, and the appropriate settings here made.
绝对具有可变或使用CSS预处理，如小于或SCSS可以帮助保持这些价值匹配相应的混入line-height，或JavaScript可用于动态读取这样的，但说真的，line-height应该在这个被使用，其中的背景下被称为，并在此处进行了适当的设置。
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-blockelement), 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 spaceand en spacedid not work (surprisingly).
Kubi 的评论指出，删除<a>元素之间空格的 html 缩小会导致理由失败。一个在内部伪空间<a>标签没有帮助（但预计，随着空间的内部发生inline-block元件），<wbr>之间添加<a>标签没有帮助（可能是因为休息没有必要到下一行），因此，如果需要缩小，然后解决方案是硬编码的不间断空格字符 - 其他空格字符如细空格和en 空格不起作用（令人惊讶）。
Nearing a Future Clean Solution
接近未来的清洁解决方案
A solutionin which webkitwas 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).
它适用于 FF 12.0+ 和 IE8+（IE7 中的错误）。
For Webkit, as of version 39 (at least, might have crept in earlier) it does support it withoutthe -webkit-extension but onlyif the userhas 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 webkityet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.
对于Webkit的，作为39版（至少，可能有早期蹑手蹑脚），它支持它没有了-webkit-，但是扩展仅当用户启用了实验性的功能（可在完成chrome://flags/#enable-experimental-web-platform-features）。有传言说 41 或 42 版应该会得到全面支持。由于目前还没有无缝支持webkit，它仍然只是部分解决方案。但是，我认为我应该发布它，因为它对某些人有用。
回答by ACJ
Consider the following:
考虑以下：
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
?(Also see the edited fiddle.) Is that what you are looking for? The advantage of this technique is that you can add more items and they will all be centered automatically. Supported by all modern Web browsers.
？（另请参阅编辑后的小提琴。）这就是您要找的吗？这种技术的优点是您可以添加更多项目，并且它们都会自动居中。所有现代 Web 浏览器都支持。
回答by J Cole Morrison
First off, I like the approach of the pseudo-elementin order to keep the markup semantic. I think you should stick with the overall approach. It's far better than resorting to tables, unnecessary markup, or over the top scripts to grab the positioning data.
首先，我喜欢pseudo-element为了保持标记语义的方法。我认为你应该坚持整体方法。这比诉诸表格、不必要的标记或在顶层脚本中获取定位数据要好得多。
For everyone stressed about text-alignbeing hacky - c'mon! It's better that the html be semantic at the expense of the CSS than vice versa.
对于每个强调text-align被黑客攻击的人 - 来吧！以牺牲 CSS 为代价的 html 语义更好，反之亦然。
So, from my understanding, you're trying to achieve this justified inline-block effect without having to worry about resetting the line-heightevery time right? I contend that you simply add
因此，根据我的理解，您正在尝试实现这种合理的内联块效果，而不必担心line-height每次都重置，对吗？我认为你只需添加
.prevNext *{
line-height: 1.2; /* or normal */
}
Then you can go about coding as though nothing happened. Here's Paul Irish's quote about the *selector if you're worried about performance:
然后你就可以开始编码了，就好像什么都没发生一样。*如果您担心性能，请参阅 Paul Irish 关于选择器的引用：
"...you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If you aren't getting 90+ Page Speed scores, it's way too early to be thinking about selector optimization."
“...你不能关心 * 的性能，除非你连接所有的 javascript，把它放在底部，缩小你的 css 和 js，gzip 你的所有资产，并无损地压缩你的所有图像。如果你不是要获得 90 多个 Page Speed 分数，现在考虑选择器优化还为时过早。”
Hope this helps!
希望这可以帮助！
-J Cole Morrison
-J 科尔莫里森
回答by Michael Frederick
Attempting to text-alignfor this problem is pretty hackish. The text-alignproperty is meant to align inline content of a block (specifically text) -- it is not meant to align html elements.
试图text-align解决这个问题是非常骇人听闻的。该text-align属性旨在对齐块的内联内容（特别是文本）——它并不意味着对齐 html 元素。
I understand that you are trying to avoid floats, but in my opinion floats are the best way to accomplish what you are trying to do.
我知道您正试图避免浮动，但在我看来，浮动是完成您想要做的事情的最佳方式。
回答by Moin Zaman
In your example you have line-height:1.2, without a unit. This may cause issues. If you're not using borders you could give the parent and the children a line-heightof 0.
在您的示例中，您有line-height:1.2, 没有单位。这可能会导致问题。如果你不使用的边界，你可以给家长和孩子们line-height的0。
The other options I can think of are:
我能想到的其他选项是：
- Use
display:tableon the parent anddisplay:table-cellon the children to simulate table like behaviour. And you align the first item left, and the last one right. See this fiddle. - Use javascript to do a count of the nav children and then give them a equally distributed width. eg. 4 children, 25%
widtheach. And align the first and last items left and right respectively. - There is a way to evenly distribute the items but is a convoluted method that requires some non breaking spaces to be carefully placed in the html along with a negative margin and
text-align:justify. You could try and adapt it the thenavelement. See example here.
回答by artlung
Your fiddle is awfully specific. It seems to me for your case this CSS would work well:
你的小提琴非常具体。在我看来，这个 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;
}
?
回答by Mohd Abdul Mujib
As stated by @Scotts, the following has been implemented inside Chrome, without the -webkitpart , which I really loved btw, specially since we need to get rid of the -browser-specific-shǐtreal soon.
正如@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 */
}
Note:Though still the Safari and Opera don't support it yet(08-SEPT-16).
注意：虽然 Safari 和 Opera 仍然不支持它(08-SEPT-16)。
回答by Ali Gajani
I think the best way would be to create the clickable element with a specific class/idand then assign float:leftor float:rightaccordingly. Hope that helps.
我认为最好的方法是使用特定的class/创建可点击元素，id然后分配float:left或float:right相应地。希望有帮助。
