¿Cómo poner un elemento de entrada en la misma línea que su etiqueta?

Hay varios enfoques para hacer que un elemento de entrada sea igual a su etiqueta. Aquí se discuten algunos enfoques. CSS básico para etiquetar, expandir e ingresar para obtener resultados claros.

Uso de atributos flotantes y de desbordamiento: crea una etiqueta y dale estilo con el atributo flotante . Ahora configure la etiqueta flotante (posición) hacia la izquierda o hacia la derecha según sus requisitos. Esto alineará su etiqueta en consecuencia. La propiedad de desbordamiento para la entrada se usa aquí para recortar la parte de desbordamiento y mostrar el resto.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <style>
        h1 {
            color: green;
        }
          
        label {
            float: left;
        }
          
        span {
            display: block;
            overflow: hidden;
            padding: 0px 4px 0px 6px;
        }
          
        input {
            width: 70%;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <label for="test">Enroll with us:</label>
    <span>
        <input name="test" id="test" 
               type="text" placeholder="Enter your input"/>
    </span>
</body>
  
</html>

Producción:

Usando el atributo de celda de tabla en la propiedad de visualización: haga una etiqueta dentro de un div y proporcione la propiedad de visualización . Para hacer que el elemento de entrada y el intervalo estén colocados por igual, use el atributo de celda de tabla en esas etiquetas. Este atributo hace que el elemento se comporte como un elemento td . Cualquier elemento que se haga cerca, el atributo table-cell lo hace.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <style>
        h1 {
            color: green;
        }
          
        .container {
            display: table;
            width: 100%
        }
          
        label {
            display: table-cell;
            width: 1px;
            white-space: nowrap;
        }
          
        span {
            display: table-cell;
            padding: 0 4px 0 6px;
        }
          
        input {
            width: 70%;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <div class="container">
        <label for="test">Enroll with us:</label>
        <span><input name="test" id="test" 
                     type="text" 
                     placeholder="Enter your input" />
        </span>
    </div>
</body>
  
</html>

Producción:

HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por mansiagrawal2103 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta