выравнивание div в css

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

попробуйте

<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>

Answer 3

вы можете использовать display:inline для divs.используйте класс css с именем: "flt_lt" и .flt_lt{float:left;}, не забудьте поставить <br class="cls" />, где .cls{clear:both;}поместите это br после последнего деления в строке.

Answer 4

Использование float: left; в классе CSS

Answer 5

Используйте float: left;, чтобы расположить узлы рядом друг с другом.