Alguien puede decirme por qué mi < div > ¿Los botones no cambiarán de tamaño?

Question

No importa lo que establezca en mis DIV, los botones que uso no cambian de tamaño. Estoy cargando el archivo correcto y tiene el cambio en el servidor, pero no pasa nada, no importa cuánto actualice. Eliminaré la URL para que no pueda usarse como publicidad una vez que obtenga una respuesta.

[url eliminado]

Answer 1

El problema aquí es que está intentando cambiar el tamaño de los elementos en línea, que no se pueden controlar explícitamente. Para establecer la altura y el ancho del elemento, debe configurar su modo de visualización en " bloque " y usa flotador para alinear los elementos horizontalmente.

div .button {
   display: block;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border: 3px double #F1A631;
   background-color: #FCFF68;
   float: left;
   width: 150px;
   height: 30px;
}

Además, deberá reorganizar sus DIV en el orden inverso en el que desea que se muestren de izquierda a derecha. Hay una propiedad de visualización en CSS2 llamada " inline-block " que está diseñado para corregir esto, pero no es universalmente compatible.

Answer 2

En CSS, los elementos con display: inline no pueden tener ancho o altura aplicados a ellos. Necesitas display: inline-block para eso. IE convertirá incorrectamente cualquier elemento en línea a bloque en línea si les da un ancho o alto. Fortunatley, desde el lanzamiento de Firefox 3, puede usar el bloqueo en línea con un mínimo de piratería.

sin compatibilidad con Firefox 2:

.ib { display: inline-block; zoom: 1; *display: inline; }

HTML de ejemplo

<div class="ib button">My button</div>

Compatibilidad con Firefox 2

.ib{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
.button { display: block; }

HTML de ejemplo

<div class="ib"><div class="button">My button</div></div>

En su implementación de .button, deberá eliminar la pantalla: parte en línea.