Reputation: 6940

Cant apply CSS elements to make form right-aligned

i have basic html form with css elements and i can't figure out why CSS code is not applied and does nothing. There is my code:

<!doctype html>
      <html>
      <head>
      <title> A basic form </title>
      <style type ="text/css">

      .form-field{
          clear: both;
          padding: 10px;
          width: 350px;
      }

      .form-field label{

          float: left;
          width: 450px;
          text-align: right;
          font-size: xx-small;
      }

      .form-field input{

          float: right;
          width: 150px;
          text-align: ;
      }

      #submit{


          font-size: larger;
          text-align: center;
      }


      </style>

      </head>

      <body>
      <h1> A basic form </h1>
      <hr> 
      <form action="#">
      <fieldset >
        <legend>Form Information </legend>
        <div> 
            <label for="username"> Name :</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
        <label form="email"> E-mail address:</label>
        <input type="text" id="username" name="email">
        </div>
        <div>
            <input id="submit" type="submit" name="submit"
            value="Send Form">
        </div>
        <div>
        <input type="reset" name="reset" value="Clear Form">
        </div>

      </fieldset>
      </form>
      </body>
      </html>

In fact, it does make changes for my submit button, but form itself is still have base (left) alignment. What did i miss?

Any help would be appreciated, thanks!

Upvotes: 0

Answers (5)

khaled.imran

Reputation: 46

Your style is for class "form-field" but it is not mentioned anywhere in the html code.

Edit your form tag to -

<form action="#" class="form-field">

Then you will be able to see the change.

Upvotes: 3

Adrian Stanca

Reputation: 31

The CSS code is not applied because the HTML element with the class "form-field" that you try to style doesn't exists. You need to apply the class to a parent element in order to be able to style the label and input.

Upvotes: 2