父级中的空div应该显示为相同

Question

如果您看到以下jsfiddle，则div中没有​​文本的元素出现在与具有文本的元素不同的级别上。是否有一种方法可以使CSS出现在一行中是否存在文本？ （没有更改标记）。

我将链接元素设置为块，以便在某些链接文本为空时它们的高度相同

http://jsfiddle.net/ch9Ax/

Answer 1

添加高度：27px到你的bzm.button :)这将确保它的大小相同，有或没有内容。

#bzm .button {
display: inline-block;
width: 90px;
height:27px;
}

Answer 2

将vertical-align:top;添加到规则#bzm .button，将其修复到我的测试浏览器中

Answer 3

对.button类使用float css属性而不是display：inline-block。

即：

#bzm .button {
display: inline-block;
width: 90px;
}

到

#bzm .button {
float: left;
width: 90px;
}

工作示例：http://jsfiddle.net/ch9Ax/12/

Answer 4

问题是

#bzm .button {
    display:inline-block;
    width: 90px;
}

将其更改为

#bzm .button {
    float:left;
    width: 90px;
}

相应的风格。

示例： http://jsfiddle.net/jasongennaro/ch9Ax/14/