How to make and <input> appear on the same line on an HTML form?

Question

I am creating a registration form for a website. I want each label and its corresponding input element to appear on the same line.

Here\'s my code:

Answer 1

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
    float: left;
}
input[type=button] {
    float:none;
}

    

        

            Name:
            
            Matric number:
            
            Email:
            
            Username:
            
            Password:
            
            
        
    

Alternatively, a more common approach would be to wrap the input/label elements in groups:

    Name:
    

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}

    

        

            

                Name:
                
            
            

                Matric number:
                
            
            

                Email:
                
            
            

                Username:
                
            
            

                Password:
                
            
            
        
    

Note that the for attribute should correspond to the id of a labelable element, not its name. This will allow users to click the label to give focus to the corresponding form element.