51

其他一些问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布……例如，我如何*真正*证明 HTML+CSS 中的水平菜单是正确的？

但是，“清除”行内块元素行的 100% 宽度元素由浏览器赋予其自己的行。line-height: 0;我不知道如何在不使用父元素的情况下摆脱那个空的垂直空间。

有关问题的示例，请参阅this fiddle

对于我使用的解决方案line-height: 0;，请参阅this fiddle

我正在使用的解决方案要求将一个新line-height的应用于子元素，但之前设置的任何line-height内容都会丢失。有人知道更好的解决方案吗？我想避免使用表格，以便在必要时可以包装元素，还想避免使用 flexbox，因为还没有浏览器支持。我也想避免浮动，因为间隔的元素数量是任意的。

4

8 回答 8

89

更新了下面的“未来”解决方案信息；还没有完全支持。

目前的解决方法（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-bottomandtop设置中的使用很容易适应任何line-height给定的乘数值之一。所以1.2, 120%, or在计算上1.2em都相等，这使得在这里使用一个很好的选择，因为即使设置了，那么for和将匹配。规范网站外观的良好编码意味着在某些时候应明确定义，因此如果使用任何乘法器方法，则等效单元将给出与. 如果设置为非line-heightemline-height: 1.21.2emmargin-bottomtopline-heightemline-heightline-heightem长度，例如px，而是可以设置。

使用诸如 LESS 或 SCSS 之类的 css 预处理器绝对拥有一个变量或 mixin 可以帮助保持这些值与适当的line-height. line-height，并在此处进行了适当的设置。

更新缩小文本（无空格）问题

Kubi 的评论指出，删除<a>元素之间的空格的 html 缩小会导致理由失败。标记内的伪空间<a>没有帮助（但这是意料之中的，因为空间发生在inline-block元素内部），<wbr>在标记之间添加一个<a>没有帮助（可能是因为下一行不需要中断），所以如果需要缩小，然后解决方案是硬编码的不间断空格字符&nbsp;- 其他空格字符（如细空格和空格）不起作用（令人惊讶）。

接近未来的清洁解决方案

一个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，它仍然只是部分解决方案。但是，我认为我应该发布它，因为它可能对某些人有用。

于 2012-07-23T19:47:02.973 回答
7

考虑以下：

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

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

​（另见编辑过的小提琴。）那是你要找的吗？这种技术的优点是您可以添加更多项目，并且它们都将自动居中。所有现代 Web 浏览器都支持。

于 2012-07-24T01:28:03.303 回答
4

首先，我喜欢这种方法pseudo-element以保持标记语义。我认为你应该坚持整体方法。这比使用表格、不必要的标记或顶级脚本来获取定位数据要好得多。

对于每个强调text-alignhacky 的人 - 来吧！最好以牺牲 CSS 为代价使 html 具有语义，反之亦然。

因此，据我了解，您正在尝试实现这种合理的内联块效果，而不必担心line-height每次都重置对吗？我认为您只需添加

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

然后你可以像什么都没发生一样开始编码。*如果您担心性能，这是 Paul Irish 关于选择器的引用：

“......除非你连接所有的javascript，把它放在底部，缩小你的css和js，gzip你的所有资产，无损压缩你的所有图像，否则你不能关心*的性能。如果你不是如果没有 90+ 的 Page Speed 分数，现在考虑优化选择器还为时过早。”

希望这可以帮助！

-J科尔莫里森

于 2012-07-23T23:02:28.160 回答
1

试图text-align解决这个问题是相当骇人听闻的。该text-align属性旨在对齐块的内联内容（特别是文本）——它并不意味着对齐 html 元素。

我了解您正在尝试避免浮动，但在我看来，浮动是完成您正在尝试做的事情的最佳方式。

于 2012-07-23T21:45:14.213 回答
0

在您的示例中，您有line-height:1.2，没有单位。这可能会导致问题。如果你不使用边框，你可以给父母和孩子一个line-height.0

我能想到的其他选择是：

  1. display:table在父级和子级上使用display:table-cell以模拟类似表格的行为。你将第一个项目左对齐，最后一个右对齐。看到这个小提琴。
  2. 使用 javascript 对导航子项进行计数，然后给它们一个均匀分布的宽度。例如。4 个孩子，每人 25% width。并分别左右对齐第一个和最后一个项目。
  3. 有一种方法可以均匀分布项目，但这是一种复杂的方法，需要在 html 中小心放置一些不间断的空格以及负边距和text-align:justify. 您可以尝试将其调整为nav元素。请参见此处的示例。
于 2012-07-23T22:13:22.620 回答
0

你的小提琴非常具体。在我看来，对于你的情况，这个 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;
}
​
于 2012-07-27T20:05:55.243 回答
0

正如@Scotts 所说，以下内容已在 Chrome 中实现，没有-webkitpart ，我真的很喜欢 btw，特别是因为我们需要尽快摆脱-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）。

于 2016-09-08T18:16:58.607 回答
-2

我认为最好的方法是使用特定的class/创建可点击元素，id然后相应地分配float:left或float:right。希望有帮助。

于 2012-07-21T20:50:03.897 回答