Alinear casillas checkeds

[neodani]

Buenas compis

Estoy intentando crear 5 apartados :

Num Solicitud
Usuario
Estado
Prioridad
Fecha

Y alguno de ellos tienen casillas checkeds, el problema es que tal y como lo tengo ahora me coloca en linea los checked, y para que os hagáis una idea... debajo de "Estado y prioridad y fecha" éstos deberian estar en una columna.

Estado
[ ] bajo
[ ] normal
[ ] Alto
[ ] Muy alto

Y al lado el siguiente apartado "Prioridad", etc...

Código HTML:

<form action="../includes/new_ticket.php" method="post" name="new_ticket" id="new_ticket">
	<div id="buscar_soli">
	
		<div class="opcion1"> 
			<p class="titulo">Num. Solicitud</p>
			<input name="numsolicitud" type="text" id="numsolicitud" size="10">
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Usuario</p>
			
			<input name="usuario" type="text" id="usuario" size="10">
			<input name="vip" type="checkbox" value="1">Vip
			 
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Estado</p>
			<div class="lista">
			<input  name="vip" type="checkbox" value="1"> Nuevo
			<input  name="vip" type="checkbox" value="1"> Pte Respuesta
			<input  name="vip" type="checkbox" value="1"> En Curso
			<input  name="vip" type="checkbox" value="1"> Pte Pago
			<input  name="vip" type="checkbox" value="1"> Finalizado
			</div>
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Prioridad</p>
			<input class="casilla" name="vip" type="checkbox" value="1"> Baja
			<input class="casilla" name="vip" type="checkbox" value="1"> Normal
			<input class="casilla" name="vip" type="checkbox" value="1"> Alta
			<input class="casilla" name="vip" type="checkbox" value="1"> Muy Alta
		</div>	
		
		<div class="opcion2"> 
			<p class="titulo">Fecha</p>
			<input class="casilla" name="vip" type="checkbox" value="1"> Mes Actual
			<input class="casilla" name="vip" type="checkbox" value="1"> Mes Pasado
			<input class="casilla" name="vip" type="checkbox" value="1"> Rango Fechas
		</div>	
			
		
	</div>
</form> 

Y aquí las pruebas de CSS

Código HTML:

#buscar_soli{
width:100%;
}

.opcion1{
float:left;
}
.opcion2{
float:left;
margin-left:10%;
}
#buscar_soli p.titulo{
background:#E8EDF0;
font-weight:bold;
padding:5px;
font-size:12px;
width:100px;
}
#buscar_soli input{
background-color:#FFFFFF;
border:1px solid #CCCCCC;
font-size:11px;
padding:5px;
}

#buscar_soli#lista input:checked{
background-color:red;

}

PD: Hay cosas raras... como la ultima que creé una capa que conteniese los checked para ver si asi podia... pero que va... que no hay manera. Algo no lo estoy poniendo bien

Gracias por adelantado

[Eourus]

has probado con display:block ?

[juaniquillo]

necesitas un contenedor block para eso. Yo metería los inputs y lables en un span y le daría display:block al span, así:

Código HTML:

 .bloque{display:block;}

<span class="bloque"><input class="casilla" name="vip" type="checkbox" value="1"> Baja</span> 

[neodani]

Iniciado por juaniquillo

necesitas un contenedor block para eso. Yo metería los inputs y lables en un span y le daría display:block al span, así:

Código HTML:

 .bloque{display:block;}

<span class="bloque"><input class="casilla" name="vip" type="checkbox" value="1"> Baja</span> 

Gracias, me sirvió el poner tipo bloque.

Mi pregunta es como diablos puedo darle efecto a un input de tipo checkbox

Tengo esto

<div id="buscar_soli">
<div class="opcion1">
<span class="bloque"><input class="vip" name="vip" type="checkbox" value="1">Vip</span>
</div>
</div>

.vip{
margin:20px;
color:red;
background:blue;
}

Por mas que hago pruebas, este por ej. me coge el margin y no me coge los colores. No lo entiendo... si esta aplicando algunas propiedades pq no las aplica todas?

[juaniquillo]

A mi tampoco nunca me ha funcionado cambiarle el color a un checkbox. He usado javascript una vez para crearlos dinámicamente y darle la apariencia que necesitaba. Mira este ejemplo:

http://web.tampabay.rr.com/bmerkey/e...heckboxes.html