html– 带有混合文本和空div的CSS内联块换行问题

显示时,我有div的对齐问题(混合为空或带有文本)：设置了内联块.有关示例,请参见下图：

正如您所看到的,带有文本的div不知何故与div的其余部分对齐.有关我的问题的工作示例,请参见this Jsfiddle.

我已经知道解决这个问题的一些方法,但我想了解它为什么会发生.我的目标是用最少的CSS更改来解决这个问题(可能没有HTML修改).

HTML

CSS

.bar {  height: 40px;  border-bottom: 1px solID #000;}.actors {  float: left;}.actor {  display: inline-block;  wIDth: 34px;  height: 34px;  background-color: gray;  border-radius: 16px;  border: 1px solID red;}.num {}.lol {  float: right;}

.actor {    vertical-align: top;}