问题 如何使用HTML和CSS模拟\ hfill？

你如何做到这一点在很大程度上取决于你在这里实际内容时想要的间距。这些技术适用于任何标签，为简单起见，我在此处选择了一个列表。如果你正在使用 p 和 span，然后更换 ul 同 p 和 li 同 span。

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

所有这三种技术都可以在不修改源顺序的情况下工作。花车 可以 做好工作，但你必须在b之前放置c才能正常工作。

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

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

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

由于IE10是第一个支持它的IE版本，因此Flexbox目前还没有得到非常广泛的支持。 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或更高版本。