CSS anchor inline-block misaligned

我有這個JSFiddle。有人可以解釋，爲什麼錨定位置相對於它的兄弟姐妹錯位？我知道我可以用相對位置和負位移來糾正它，但我不明白，爲什麼它首先是這樣。CSS anchor inline-block misaligned

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

來源

2014-02-12 W.B.

此行爲的原因是由於您的.left和.right元素中沒有文字。

默認情況下inline-block的元素有vertical-align: baseline，但既然你有空元素沒有基線，所以他們會如果添加在他們裏面一些文字自動對準parent基線（—甚至  —你會istantly解決問題）

爲了防止此行爲，您還可以爲所有.container子女設置一個常見的vertical-align。

來源

2014-02-12 10:24:31 fcalderan

謝謝！雖然所有的答案都解決了這個問題，但你實際上提供了一個我之前的解釋。 –

您可以添加

vertical-align: top;

到.container a

這將使錨點與div對齊。

來源

2014-02-12 10:22:56 Arno

當您聲明inline-block時，您需要提供vertical-align屬性。

你在這裏。

WORKING DEMO

CSS的變化：

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

來源

2014-02-12 10:27:08 Nitesh

您可以使用這麼多的選項

。刪除Display:inline-block並添加float:left

這裏Demo

。使用CSS vertical-align:top

這裏demo

來源

2014-02-12 10:38:15

CSS anchor inline-block misaligned

回答

相關問題