CSS Form form groups

July 1, 2014 15:31:17

First time to write CSS, forgive me

Css:

1 /*form*/2 /*default*/3 . Form-box. Form-group. Form-label{text-align: Right;width:200px;Height:33px;Line-height:33px;}4 . Form-box. Form-group. Form-input{text-align: Left;width:200px;Height:33px; Display:inline;}5 . Form-box. Form-group. Form-tip{margin:5px;padding:0px;width:200px;text-align:Center; Display:inline;}6 . Form-box. Form-submit{Margin-left:200px}7 8 /*Small*/9 . Form-box. Form-group. Form-label-small{text-align: Right;width:150px;Height:33px;Line-height:33px;}Ten . Form-box. Form-group. Form-input-small{text-align: Left;width:150px;Height:33px;} One . Form-box. Form-group. Form-tip-small{margin:5px;padding:0px;width:150px;text-align:Center;} A . Form-box. Form-submit-small{Margin-left:150px} -  - /*Large*/ the . Form-box. Form-group. Form-label-large{text-align: Right;width:250px;Height:33px;Line-height:33px;} - . Form-box. Form-group. Form-input-large{text-align: Left;width:250px;Height:33px;} - . Form-box. Form-group. Form-tip-large{margin:5px;padding:0px;width:250px;text-align:Center;} - . Form-box. Form-submit-large{Margin-left:250px}

Html:

1 <form class= "Form-box" >2 <div class= "Form-group" >3 <label class= "Form-label" > Table sole name: </label>4 <input type= "text" class= "Form-input" >5 <span class= "Form-tip" ></span>6 </div>7 <div class= "Form-group" >8 <label class= "Form-label" > Table sole name: </label>9 <input type= "text" class= "Form-input" >Ten <span class= "Form-tip" ></span> One </div> A <input type= "Submit" class= "Form-submit" value= "go!" > - </form>