CODEWITHSUNDEEP
htmlcss
jattDaBoi
jattDaBoi

Reputation: 37

How can I align input fields in css?

Here is the image of how I should have my form look like: https://i.sstatic.net/77sGh.jpg I got everything done, except I can't get the * to show in red after some lines, and also how can I align the input fields and the input names in the center horizontally?

Upvotes: 2

Views: 308

Answers (1)

Stackman
Stackman

Reputation: 129

You could just use a table as was mentioned or you could do something like this:

            <div>
                <!-- container for one row, ie the 'First Name' label and its text input box -->
                <div class="row">
                    <!-- the label (ie 'First Name') has its own div and the Name text box has its own div. Doing this makes it possible to left align the labels properly and align the text boxes properly -->
                    <div class="left-side"><p>First Name:</p></div>
                    <div class="right-side"><p><input type="text" class="textbox"/></p></div>
                </div>
                <div class="row">
                    <div class="left-side"><p>Last Name:<p></div>
                    <div class="right-side"><p><input type="email"  class="textbox"/></p></div>
                </div>
                <div class="row">
                    <div class="left-side"><p>Student ID:<p></div>
                    <div class="right-side"><p><input type="text"  class="textbox"/></p></div>
                </div>
            </div>

and so on for the whole form.

Then in your css set the left-side class with some width and 

text-align: right;

and for the right-side class set some width and 

text-align:left;

For the red * after each text box try putting this code after each text input box:

<span class="redStar">*<span>

and add the following css class:

.redStar {
    color: red;
}

Upvotes: 1

Related Questions