entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Hacer que la caja de texto y el botón tengan la misma altura

Estoy haciendo un pequeño formulario con un input type="text" y un botón de envio y quiero que tengan la misma altura, pero no hay manera ni en Firefox, ni en Chrome tienen la misma altura. Os pongo el código:

Código aquí

1 Respuesta

4votos

Peter Puntos150480

Te modifico un poco las clases en el HTML y el CSS para que veas mejor cada elemento y el resultado que buscas:

HTML

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
    <div id="form">
    <h3>Opción (1-19):</h3>&nbsp;&nbsp;     
        <form class="elform" name="orden" action="#" method="get">
        <input type="text" id="tt" name="tt"placeholder="placeholder" class="camponumerico" cols="2" rows="1">&nbsp;
        <input type="submit" name="submit" value="buscar" class="submit">
    </form>  
</div>  
</body>

CSS

div#form {  
    z-index: 555;
    position: relative;
    top: 20%;   
    left: 50%;
    max-width: 20%;
    width: 20%; 
    margin-top: 7%;
    text-align: center;     

    transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%); 
    -o-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
}

#form{
    background: blue;
}

.elform{
    background: red;
}

input[type=text] {
    padding:0px 10px; 
    border:0px; 
    height:40px;
    background:#ccc; 
    float: left;
}

input[type=submit] {
    padding:0px 10px; 
    border:0px; 
    background:#ccc; 
    height:40px;
}

1voto

bichomen comentado

Hola Peter, pues funciona, si quitas los bordes, pero me interesaría con bordes.

2votos

Peter comentado

Es lo mismo, aunque si usas por ejemplo un borde de 1px, tienes que restarle 2 a la altura.

Saludos.

1voto

bichomen comentado

Gracias @Peter

1voto

Peter comentado

De nada, que bueno que te funcionó!

Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta