css - css中div的对齐方式

Question

    <span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>

将产生

如何将上面的代码格式化为如下所示

属性 float: left 没有按我的预期工作。如果我将它用于 div，则所有 div 都将排在第一位。那么所有的 span 都会排在第二位。

Answer 1

div 是 block 级元素，因此它们在屏幕上占据一整行。您可以将它们设置为 display: inline-block;。

http://jsfiddle.net/nLMGT/