allineare checkbox e label

[Manuel.s]

ciao a tutti

ho una serie di checkbox, ogniuno con la propria label, fatti in questo modo:

<form enctype="application/x-www-form-urlencoded" method="post" action="">
	<dl class="zend_form">
		<dt id="item-label"><label for="item" class="required">Item</label></dt>
		<dd id="item-element"><input type="text" name="item" id="item" value="" maxlength="255" size="100" /></dd>

		<dt id="deadline-label"><label for="deadline" class="required">Deadline</label></dt>
		<dd id="deadline-element"><input type="text" name="deadline" id="deadline" value="" class="pick_date" /></dd>

		<dt id="id_project-label">&#160;</dt>
		<dd id="id_project-element"><input type="hidden" name="id_project" value="1" id="id_project" /></dd>

		<dt id="id_user-label">&#160;</dt>
		<dd id="id_user-element"><input type="hidden" name="id_user" value="5" id="id_user" /></dd>

		<dt id="users_5-label"><label for="users_5" class="optional">name1</label></dt>
		<dd id="users_5-element">
			<input type="hidden" name="users_5" value="0" />
			<input type="checkbox" name="users_5" id="users_5" value="1" checked_value="5" unchecked_value="0" />
		</dd>
		<dt id="users_6-label"><label for="users_6" class="optional">name2</label></dt>
		<dd id="users_6-element">
			<input type="hidden" name="users_6" value="0" />
			<input type="checkbox" name="users_6" id="users_6" value="1" checked_value="6" unchecked_value="0" />
		</dd>

		<dt id="users_1-label"><label for="users_1" class="optional">name3</label></dt>
		<dd id="users_1-element">
			<input type="hidden" name="users_1" value="0" />
			<input type="checkbox" name="users_1" id="users_1" value="1" checked_value="1" unchecked_value="0" />
		</dd>

		<dt id="loginButton-label">&#160;</dt>
		<dd id="loginButton-element"><input type="submit" name="loginButton" id="loginButton" value="Login" /></dd>
	</dl>
</form>

label e checkbox vengono visualizzati in verticale, uno sotto all'altro, qualcuno può dirmi come dargli un aspetto piu ordinato? purtroppo non ho modo di intervenire nel codice se nonaggiungendo class="" ad un elemento se necessario, perché il codice è generato da zend framework e non riesco a controllarlo completamente, quindi posso intervenire solo sul css.

grazie per l'aiuto
Manuel

[Camarillo]

Ciao Manuel.s.

Se puoi aggiungi una classe al form e poi prova con:

.classe-form dt {
  width: 80px;
  float: left;
}

Questo dovrebbe mettere a sinistra i label e a destra gli input, i quali cominciano tutti dalla stessa distanza. Non so se ti va bene, ma magari è un buon inizio . Se hai ancora qualche problema di posizionamento magari prova a dare margin:0 e padding:0 ai dt e ai dd .

[Pierhagi]

Ciao

sto utilizzando questo articolo per dare una nuovo look alle mie checkbox:

http://www.html.it/articoli/personal...n-con-i-css-3/

il codice che utilizzo è quello della "demo conclusiva".

...va tutto bene ma vorrei invertire la posizione delle input con le label, cioè visualizzare a sinistra la label e la checkbox a destra, puoi aiutarmi non capisco come fare?

Penso che con un float: left si dovrebbe invertire ma è possibile creare una nuova regola css invertita così:

p:not(#foo) > label + input[type='checkbox'] {...}

Ho anche visto questo articolo ma nei css non ho trovato il codice:
http://www.thecssninja.com/demo/css_custom-forms/