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是块级元素，因此它们占据屏幕上的整个“线”。您可以将它们设置为display: inline-block;。

http://jsfiddle.net/nLMGT/

Answer 2

使用float: left;使节点彼此排列。

Answer 3

在CSS类

中使用float: left;

Answer 4

您可以将display:inline用于div 使用名为“flt_lt”和.flt_lt{float:left;}的css类，不要忘记将<br class="cls" />放在.cls{clear:both;}的位置 把这个br放在你想要的最后一个div之后。

Answer 5

试试这个

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