如何使用HTML和CSS模拟\h填充？_Html_Css

如何使用HTML和CSS模拟\h填充？

html css

如何使用HTML和CSS模拟\h填充？,html,css,Html,Css,考虑这样一个简单的网页： <!DOCTYPE html> <html><head><title>Test!</title></head> <body> <p>a b c</p> </body></html> 测试！ a、b、c 我希望将a b c格式化为我用TeX编写的a\hfill b\hfill c。这是：a在左边，b在中间，然后c在右边；都在同一条线上。

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

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


测试！
a、b、c

我希望将a b c格式化为我用TeX编写的

a\hfill b\hfill c

。这是：a在左边，b在中间，然后c在右边；都在同一条线上。我该怎么做呢？

这在很大程度上取决于当这里实际有内容时，您希望间隔的大小。这些技术适用于任何标记，为了简单起见，我在这里选择了一个列表。如果您使用的是

和

span

，则将

ul

替换为

，将

li

替换为

span

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

由于IE10是第一个支持Flexbox的IE版本，Flexbox目前没有得到广泛的支持

您可以使用

display:table

族和文本对齐方式，使人们产生这样一种错觉，即元素以所需的方式分布，但它们的容器占其父元素宽度的33%。在本例中，无论实际内容如何，b都应保持完全居中。您的元素高度也相等，无论发生什么情况，都将被迫显示在同一行上

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

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

第三种技术涉及使用伪元素作为父元素的最后一行，以便我们可以证明a、b和c是正确的。如果图元不在同一条线上，则无法防止使用此技术进行包裹

与其他技术不同，不需要附加标记。它可能只是一个

标记，就像您在示例代码中已经使用的那样

与上述技术类似，它在IE8或更高版本中工作。

是的，我经常混淆reft和light。在

中创建其他标记是否可以接受？是的，完全可以接受您尝试实现它的代码是什么？@Shail位置的问题：绝对是，显示不会在电路板末端停止。

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

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

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

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

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

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