17

考虑一个像这样的简单网页：

<!DOCTYPE html>
<html><head><title>Test!</title></head>
<body>
<p>a b c</p>
</body></html>

我希望将abc格式化为就像我a\hfill b\hfill c在 TeX 中编写的一样。这是：a在左边，然后b居中，然后c在右边；都在同一条线上。我怎样才能做到这一点？

4

1 回答 1

14

您将如何处理这在很大程度上取决于您希望此处实际内容时的间距如何。这些技术适用于任何标签，为了简单起见，我在这里选择了一个列表。如果您正在使用pand span，则ul用pandli替换span。

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

所有这 3 种技术都可以在不修改源顺序的情况下工作。浮点数可以完成这项工作，但您必须将 c 放在 b 之前才能正常工作。

该技术使用 flexbox 并假设包含 a、b 和 c 的元素刚好足够容纳它们并且它们之间的空间相等（如果 a 大于 b，则 b 不会居中）。Flexbox 有很多选项来确定有关换行的行为，但默认情况下根本不换行。

http://jsfiddle.net/4g8NY/1/（不包括前缀）

ul {
    display: flex;
    justify-content: space-between;
}

Flexbox 目前还没有得到非常广泛的支持，因为 IE10 是第一个支持它的 IE 版本。 http://caniuse.com/#search=flexbox

您可以将display: table族与文本对齐一起使用，以产生元素以所需方式分布的错觉，但它们的容器占据了其父级宽度的 33%。在此示例中，无论实际内容如何，​​ b 都应保持完全居中。您的元素也具有相同的高度，无论如何都将被迫出现在同一行。

与其他技术不同，这假设永远只有 3 个元素。每次添加元素时，您都需要修改列宽并修改哪些列应该具有哪种对齐方式。

http://jsfiddle.net/4g8NY/2/

ul {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
    width: 33%;
}

li:nth-child(2) {
    text-align: center;
}

li:last-child {
    text-align: right;
}

对这种技术的支持非常好，因为我们所有的属性都在 IE8 中可用（IE8 是我的官方截止，IE7 和更早版本不被认为是“支持的浏览器”）。

第三种技术涉及使用伪元素作为父元素的最后一行，以便我们可以证明 a、b 和 c 的合理性。如果元素不适合在同一行，则无法防止使用此技术进行换行。

与其他技术不同，不需要额外的标记。它可能只是p您在示例代码中已有的标签。

http://jsfiddle.net/4g8NY/3/

ul {
    text-align: justify;
}

ul:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

li {
    display: inline; /* if you're using an element that's already `inline` like a span, you don't need this */
}

与上述技术类似，它适用于 IE8 或更高版本。

于 2013-02-17T14:03:39.730 回答