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;
}

Answer 1

此行为的原因是由于.left和.right元素中缺少文字。

默认情况下，内联块元素有vertical-align: baseline，但由于你有空元素，所以没有基线，所以它们将自动与parent基线对齐（如果在其中添加一些文本 - 甚至一个  - 你会明白地解决问题）

为了防止出现这种情况，您还可以为所有vertical-align子女设置一个公共.container。

Answer 2

您可以添加

vertical-align: top;

到.container a

这会将锚点与div对齐。

Answer 3

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

你走了。

<强> WORKING DEMO

CSS更改：

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

Answer 4

您可以使用这么多选项

<强> 1 即可。删除Display:inline-block并添加float:left

这里是Demo

<强> 2 即可。使用css vertical-align:top

此处demo

CSS锚点内联块未对齐

4 个答案: