css - reducir - ¿Cómo hacer que un div tenga un tamaño fijo?

reducir tamaño div css

Question

Hice un sitio así que cuando haces clic en el botón 30px cambia la fuente dentro de la div .

Tengo una ul en su interior con los botones. Cuando cambio el tamaño de la fuente, la div expande y los botones de navegación también se mueven con ella.

¿Cómo lo hago para que se mantenga fijo, pero las fuentes todavía pueden cambiar.

Answer 1

Ese es el comportamiento natural de los botones. Podría intentar colocar un ancho máximo / alto máximo en el contenedor principal, pero no estoy seguro de si eso lo haría.

max-width:something px;
max-height:something px;

La otra opción sería usar las herramientas devlopr y ver si puedes eliminar el relleno natural.

padding: 0;

Answer 2

Usa este estilo

<div
class="form-control"
style="height:100px; width:55%; overflow: hidden; cursor:pointer" ></div>

Answer 3

Usa estilo ancho.

CSS:

div {
width:50px;
}

HTML

<div style="width:50px">Hello world</div>

Answer 4

prueba el siguiente css

#innerbox
{
width:250px; /* or whatever width you want. */
max-width:250px; /* or whatever width you want. */
display: inline-block;
}

Esto hace que el div ocupe el menor espacio posible, y su ancho está definido por css.

// respuesta ampliada

Para hacer los anchos fijos de los botones haga lo siguiente:

#innerbox input
{
width:150px; /* or whatever width you want. */
max-width:150px; /* or whatever width you want. */
}

Sin embargo, debe tener en cuenta que a medida que cambia el tamaño del texto, necesita más espacio para mostrarlo. Como tal, es natural que los contenedores necesiten expandirse. Quizás deberías revisar lo que estás tratando de hacer; y tal vez tenga algunas clases predefinidas que modifique sobre la marcha usando javascript para garantizar que la ubicación del contenido sea perfecta.

Answer 5

puedes darle una altura máxima y una anchura máxima en tu .css

.fontpixel{max-width:200px; max-height:200px;}

Además de sus propiedades de altura y anchura.

Answer 6

<div>
<img src="whatever it is" class="image-crop">
</div>
/*mobile code*/
.image-crop{
width:100%;
max-height: auto;
}
/*desktop code*/
@media screen and (min-width: 640px) {
.image-crop{
width:100%;
max-height: 140px;
}