Allineamento controlli input text e label

**niquesca** · 14-02-2014, 11:12

pag.jpgSalve,

dovrei inserire due caselle input box una sotto l'altra (codice e password) allineate allo stesso margine sinistro e le rispettive label sempre allineate al margine sinistro. Tutto il blocco al centro. Come da immagine in allegato . Con le tabelle funziona...ma sono sicura che esiste un metodo migliore, magari con qualche tag. Suggerimenti?

grazie

**KillerWorm** · 15-02-2014, 17:08

In linea di massima puoi usare gli elementi <label> e <input>, quindi applicargli la regola display:inline-block.
Con qualche altra aggiustatina puoi ottenere qualcosa di simile a ciò che chiedi:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      label, input {
        display: inline-block;
        width: 130px;
        margin: 5px;
      }
      label {
        color: #777;
        font-size: 14px;
      }
      form {
        width: 300px;
        margin: 0 auto; /* centra l'intero form nella pagina */
        padding: 10px 0;
        border: 3px double #99a;
      }
    </style>

  </head>
  <body>
    <form action="#">
      <label for="codice">Codice</label><input type="text" id="codice">
      <label for="password">Password</label><input type="text" id="password">
    </form>
  </body>
</html>

**niquesca** · 17-02-2014, 18:19

Grazie 1000000
provo ....

Originariamente inviata da KillerWorm

In linea di massima puoi usare gli elementi <label> e <input>, quindi applicargli la regola display:inline-block.
Con qualche altra aggiustatina puoi ottenere qualcosa di simile a ciò che chiedi:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      label, input {
        display: inline-block;
        width: 130px;
        margin: 5px;
      }
      label {
        color: #777;
        font-size: 14px;
      }
      form {
        width: 300px;
        margin: 0 auto; /* centra l'intero form nella pagina */
        padding: 10px 0;
        border: 3px double #99a;
      }
    </style>

  </head>
  <body>
    <form action="#">
      <label for="codice">Codice</label><input type="text" id="codice">
      <label for="password">Password</label><input type="text" id="password">
    </form>
  </body>
</html>

Discussione: Allineamento controlli input text e label

Strumenti discussione

Ricerca discussione

Visualizza

Allineamento controlli input text e label

Allineamento controlli input text e label

Permessi di invio