CSS锚点内联块对齐不准确。

Question

我有这个JSFiddle。有人能解释一下为什么锚点的位置与其兄弟节点不对齐吗？我知道我可以通过相对定位和负的顶部偏移来纠正它，但我不明白为什么一开始就是这样。

HTML：

<div class="container">
    <div class="left"></div>
    <a href="">Some link</a>
    <div class="right"></div>
</div>

CSS：

.container {
    height: 25px;
    white-space: nowrap;
}

.container .left {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container .right {
    border: 1px solid black;
    display: inline-block;
    margin: 0;
    height: 25px;
    width: 80px;
    padding: 0;
}

.container a {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    width: 300px;
    margin: 0;
}

- W.B.

Answer 1

这种行为的原因是由于您的 .left 和 .right 元素内缺少文本。默认情况下，inline-block 元素具有 vertical-align: baseline，但由于这里没有基线，因此它们将自动对齐到父级基线（如果您在其中添加一些文本 —— 即使是一个   —— 问题将立即得到解决）。

为了防止这种行为，您还可以为所有 .container 的子元素设置一个共同的 vertical-align。

- Fabrizio Calderan

---

谢谢！虽然所有的答案都解决了问题，但是你的回答提供了我想要的解释。 - W.B.

Answer 2

您可以添加

标签

vertical-align: top;

将 .container a 调整对齐 divs。

这将使锚点与 div 对齐。

- Arno

Answer 3

当声明一个inline-block时，您需要提供vertical-align属性。

这是您需要的。 工作演示 CSS更改：

.container a {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    width: 300px;
    margin: 0;
    vertical-align:top;
}

- Nitesh

Answer 4

您可以使用很多选项

1. 移除 Display:inline-block 并添加 float:left

这里是 演示

2. 使用 css vertical-align:top

这里是 演示

- Dinesh Kanivu