Allinea gli elementi del modulo in css

Sono nuovo in css e ho un semplice modulo di accesso che sto cercando di allineare correttamente. Fondamentalmente due colonne con le etichette e il pulsante Login in una colonna e le caselle di testo in un'altra colonna. Come faccio a farlo in css?Allinea gli elementi del modulo in css

il codice HTML è

<body> 
    <form action="" method="post"> 
    <label> Username </label> 
    <input type="text"/> 

    <label> Password </label> 
    <input type="password"/> 

    <input type="submit" value="submit"/> 
    </form> 
</body>

fonte

2012-11-02 DavidL

Dopo aver immesso il tipo password e nome utente, aggiungere
. – Vucko

Questo è un approccio che funziona:

form { 
    width: 80%; 
    margin: 0 auto; 
} 

label, input { 
    /* in order to define widths */ 
    display: inline-block; 
} 

label { 
    width: 30%; 
    /* positions the label text beside the input */ 
    text-align: right; 
} 

label + input { 
    width: 30%; 
    /* large margin-right to force the next element to the new-line 
     and margin-left to create a gutter between the label and input */ 
    margin: 0 30% 0 4%; 
} 

/* only the submit button is matched by this selector, 
    but to be sure you could use an id or class for that button */ 
input + input { 
    float: right; 
}

JS Fiddle demo.

Regolare le dimensioni e i margini in base alle proprie esigenze ed estetiche.

fonte

2012-11-02 22:45:39

@Jacob: grazie! Quella era probabilmente una pre-modifica dell'affermazione piuttosto confusionaria! XD –

again man - nice name @DaveThomas –

Per quello che stai chiedendo, li avrei semplicemente messi in un tavolo.

<form action="" method="post"> 
    <table> 
     <tr> 
      <td><label> Username </label></td> 
      <td><input type="text"/></td> 
     </tr> 
     <tr> 
      <td><label> Password </label></td> 
      <td> <input type="password"/></td> 
     </tr> 
     <tr> 
      <td colspan="2"><input type="submit" value="submit"/></td> 
     </tr> 
    </table> 
    </form>

Ecco cosa sarà simile http://jsfiddle.net/wCSAn/

fonte

2012-11-02 22:53:24 TheLawrence

+10

Questo non è un dato tabellare e quindi non dovrebbe essere in una tabella – Neil

Domanda posta come farlo in CSS. Sebbene i tavoli siano allettanti perché ottengono il lavoro, non è una buona pratica. –

Ci sono righe e colonne: è una tabella. – dcromley

ho risposto a questa domanda nel mio post sul blog: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/

Si riferisce a questo violino: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Spoiler: float: right; è il diritto direzione, ma ci vuole un po 'più di attenzione per ottenere risultati accurati.

fonte

2015-06-18 18:50:11 user2389922

+1 per fornire 4 approcci diversi, ben riordinati e spiegati. Tuttavia, se quei collegamenti muoiono questa risposta sarà inutile. Si prega di prendere il tempo di descrivere brevemente le soluzioni nella risposta direttamente. –

Allinea gli elementi del modulo in css

risposta

Problemi correlati