Saludos a todos!
Estoy maquetando una web, y me encuentro con problemas a la hora de alinear ciertas capas contenidas en una capa contenedora.
La idea es que las capas se vayan colocando una al lado de otra, hasta que lleguen al final del ancho de la capa contenedora. En tal caso, la capa en cuestión se colocará en una nueva línea, debajo de las anteriores.
El problema es que no sé por qué pero cuando una capa ya no cabe en la 1ª línea y se coloca en la 2ª, se coloca no al inicio de la 2ª línea en horizontal, si no debajo de la 2ª capa de la 1ª línea! Es una cosa bastante rara...alguien me sabría decir por qué pasa esto? Os dejo el código:
Código HTML:
<div id="capaOpciones">
<div class="opcion">
<span class="ltdetail">Título:</span>
<input id="textoTitulo" name="titulo" type="text" class="textbox" />
</div>
<div class="opcion">
<span class="ltdetail">Este mensaje...</span>
<select name="reqRespuesta">
<option value="si" selected="selected">Requiere respuesta</option>
<option value="no">No requiere respuesta</option>
</select>
</div>
<div class="opcion" style="width:30px">
<span class="ltdetail">Fecha límite respuesta (DD/MM/AAAA):</span>
<input name="fecha" type="text" class="textbox" />
</div>
<div class="opcion">
<span class="ltdetail">Hora límite (HH:MM):</span>
<input name="hora" type="text" class="textbox" />
</div>
<div style="clear:both;"></div>
</div>
Y esto es el CSS:
Código:
#capaOpciones {
width:950px;
background:#d5d1bf;
padding:20px;
}
select {
border:none;
font:13px Tahoma, Geneva, sans-serif;
}
.opcion {
float:left;
margin:10px;
}
.textbox {font:13px Tahoma, Geneva, sans-serif;width:290px;border:none;padding:2px;color:#444}
.ltdetail {font:14px Tahoma, Geneva, sans-serif;color:#413e32;font-weight:bold;}