Input di moduli di allineamento CSS e elementi di blocco in linea

Vorrei allineare i miei elementi icona con gli input del modulo. Questo è quello che ho finora:

jsfiddle

e il css:

 .ctr { font-size: 0; } .ctr input { font-size: 14px; line-height: 14px; height: 14px; width: 100px; padding: 13px; border: 1px solid #000; } .icon-ctr { display: inline-block; height: 16px; padding: 12px; border: 1px solid #000; margin-right: -1px; } .icon { display: inline-block; height: 16px; width: 16px; background-color: #f00; } 

Noterai che gli elementi non si allineano in linea retta come speravo. Innanzitutto quale proprietà sta causando questo? E in secondo luogo qual è il modo più appropriato per allineare gli elementi in linea retta?

Gli elementi di blocco in linea, per impostazione predefinita, si allineano alla linea di base dell’elemento precedente.

Tutto quello che devi fare è allineare verticalmente l’input nella parte superiore dell’icona.

 .ctr input { vertical-align: top; } 

JSFiddle

Usa in .icon-ctr aggiungi float: left;

 .ctr { font-size: 0; } .ctr input { font-size: 14px; line-height: 14px; height: 14px; width: 100px; padding: 13px; border: 1px solid #000; } .icon-ctr { display: inline-block; float: left; height: 16px; padding: 12px; border: 1px solid #000; margin-right: -1px; } .icon { display: inline-block; height: 16px; width: 16px; background-color: #f00; }