Горизонтальное выравнивание пружинные флажков

Question

у меня есть этот код

<form:checkboxes path="domainContainerArray" items="${checkBoxesMap}"/> 

Он Показано флажков в вертикальном направлении, как этот

я искал много и даже пытались применить CSS, но я failed.How Можно ли выровнять их по горизонтали? Какие-либо предложения?
EDIT: Отметка вверх генерируется код

<fieldset style="float: right"> 
<span> 
<input id="d1" type="checkbox" value="1" name="dTypeContainerArray"> 
<label for="d1">Item 1</label> 
</span> 
<span> 
<input id="d2" type="checkbox" value="2" name="dTypeContainerArray"> 
<label for="d2">Item 2</label> 
</span> 
<span> 
<input id="d3" type="checkbox" value="3" name="dTypeContainerArray"> 
<label for="d3">item 3</label> 
</span> 
    ........ 
<span> 
<input id="d7" type="checkbox" value="7" name="dTypeContainerArray"> 
<label for="d7">Media</label> 
</span> 
<span> 
<input id="d8" type="checkbox" value="8" name="dTypeContainerArray"> 
<label for="d8">Misc</label> 
</span> 
<span> 
<input id="d9" type="checkbox" value="9" name="dTypeContainerArray"> 
<label for="d9">Open Source Int</label> 
</span> 
<input type="hidden" value="on" name="_dTypeContainerArray"> 
<input class="ui-button ui-widget ui-state-default ui-corner-all" type="submit" onclick="changeFormAction('2/76/finalize')" style="border-radius: 0" value="Check Button" role="button"> 
</fieldset> 

Answer 1

checkboxes тег позволяет указать атрибут cssClass. Вы можете предоставить класс css, который будет применяться. Затем просто определите стиль в вашем css, который заставляет эти элементы плавать.

Documentation

Необработанные HTML вы вывесили фактически выравнивает флажков по горизонтали. См. here. Я подозреваю, что некоторые другие стили на вашей странице влияют на эти флажки.

Answer 2

У меня была такая же проблема, используя Bootstrap css. Я исправил, переопределив стиль элемента ярлыка для отображения: inline.

Answer 3

Для этого вы можете использовать отображение: свойство встроенного блока. Посмотрите на этот код.

JSFiddle

label { 
display: inline-block; 
width: 40%; 
}