Question

我有三个链接。我想将它们对齐，如左边一个，中间一个，右边一个。说我的链接是prev（我想要放在行的左边）home（我想要放在行的中间）和next（我想要放在行的右边）。所以我写了这段代码：

<a href="link">prev</a>
lots of &nbsp;
<a href="link">home</a>
lots of &nbsp;
<a href="link">next</a>`

我明白这是错误的，因为它是一个固定的大小，如果我调整窗口大小或在相对较小的屏幕上会引起问题。所以我尝试了这个：

<a href="link" align="left">prev</a>
<a href="link" align="center">home</a>
<a href="link" align="right">next</a>

但它没有用！那么如何用HTML解决这个问题？

`

Answer 1

用div容器包裹链接并在包装器上使用左/右浮动和text-align: center：

.wrap {
    text-align: center;
    background: #EEE;
    padding: 10px;
}
.wrap .left {
    float: left;
}
.wrap .right {
    float: right;
}

<div class="wrap">
    <a href="link" class="left">prev</a>
    <a href="link">home</a>
    <a href="link" class="right">next</a>
</div>

如何水平对齐一系列HTML链接？

1 个答案: