CSS對齊問題

Question

好吧，所以我有一個div和一個跨越彼此相鄰的使用顯示：內聯塊。 但問題是，當我把東西放到div中時，跨度也向下移動以對齊它。我怎麼能阻止這一點，並保持頂部旁邊的頂部的跨越。

HTML：

<div id="meat"> 
HELLO 
</div> 

<span id="tomato"> 
HELLO 
</span> 

CSS：

#meat{ 
    width:713px; 
    border:1px solid #000; 
    margin-left:169px; 
    display:inline-block; 

} 

#tomato{ 
    width:199px; 
    border:3px solid #000; 
    display:inline-block; 
} 

你可以看到在MYSITE

Answer 1

嘗試

float: right; 

而不是

display:inline-block; 

在您的跨度

Answer 2

我活生生的例子你可以試着在每一個使用float: left;。這應該使他們對齊頂部。

Answer 3

跨度向下移動，因爲它的一個內聯元素，並默認垂直對齊底部設置：

vertical-alignment:top; 

將解決您的問題

使你的代碼看起來像

#tomato{ 
    width:199px; 
    border:3px solid #000; 
    display:inline-block; 
    vertical-alignment:top; 
}