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>

Will produce

How can I format the above code to look like the following

The property float: left is not working as I desired. If I use this for div, all the divs will come first. Then all the span will come second.

Answer 1

Divs are block level elements so they take up an entire ‘line’ on the screen. You can set them to display: inline-block; instead.

http://jsfiddle.net/nLMGT/