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