我怎样才能排队跟随<button>

Question

我有以下的HTML一个中的文本：

<div class="xxx float-left"> 
    <button class="small">X</button> 
    <button class="small">Y</button> 
    <button class="small">Z</button> 
    <span>xx</span> 
</div> 

这里是一个的应用到这些的CSS：

.xxx { 
    line-height: 2.5rem; 
} 
button.small { 
    font-size: 1.4rem; 
    margin: 0 0.2rem; 
    padding: 0.3rem 0.8rem; 
    float: left; 
} 
.xxx span { 
    line-height: 2.5rem; 
} 

我想<span>文本垂直排列在中间，但现在它出现在顶部。有没有办法让xxx文本与button标签一致？

Answer 1

Chrome和Firefox看起来垂直对齐。对我来说，IE就像你描述的那样呈现它。我改变：

.xxx { 
    line-height: 2.5rem; 
} 

这样：

.xxx { 
    line-height: 2rem; 
} 

Answer 2

副手我不会使用浮动。

Inline-block是专为这样的：

JSFiddle Demo

button.small { 
    display:inline-block; 
    vertical-align:middle; 
} 
.xxx span { 
    display:inline-block; 
    vertical-align:middle; 
}