CODEWITHSUNDEEP
htmlcss
hithere
hithere

Reputation: 87

How do I right justify the input fields and left justify the labels?

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <meta charset="utf-8">
    <title> Contact page </title>
</head>
<body>
<div id="wrapper">  
        <header>
            <nav>
                  <ul>
                    <li> <a href="index.html"> Index </a></li>
                    <li> <a href="learning_log.html"> Learning Log </a></li>
                    <li> <a href="contact.html"> Contact </a></li>
              </ul>
        </nav>
    </header>



<h1> Contact page </h1>
<form> 
    <fieldset>
        <legend>Contact Information</legend>
    <p><label >first_name*: <input type="text" name="first_name*" required></label></p> 
    <p><label >last_name*: <input type="text" name="last_name*" required></label></p>
    <p><label >phone_number*: <input type="number" name="number*" required></label></p>    
        </fieldset>
        <fieldset>
            <legend>Radio</legend>
 <label >  contact_permission* </label><br>
     <input type="radio" name="rating" required value="1 hour"> Yes <br/>
 <input type="radio" name="rating" value="2 hours"> No <br/>  
            </fieldset>
        <fieldset>
        <legend>Dropdown List</legend>
        <label>best_time_to_contact*: </label>
<select required>
 <option value="">Please Select</option>
 <option value="1"> Morning</option>
 <option value="2"> Afternoon</option>
 <option value="3"> Evening</option>
</select>
        </fieldset>
        <fieldset>
            <legend>Check box</legend>
        <label > how_can_i_contact_you  </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
        </fieldset>

  <br>      



        <input type="submit" name="Submit" value="Submit">
    </form>
    </div>
    </body>
</html>

Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. https://jsfiddle.net/tyvx60zc/ here is a jsfiddle of the code with my external css. any help would be greatly appreciated

Upvotes: 0

Views: 1592

Answers (3)

Domain
Domain

Reputation: 11808

Add the following CSS into your CSS file:

p label{
width: 35%;
display: inline-block;
text-align: left;
}

p label input{
float: right;
}

Upvotes: 0

abalter
abalter

Reputation: 10393

Remove text-align: center; from the wrapper, and instead use:

input {
  display: inline-block;
  position: relative;
}

label {
  display: inline-block;
  width: 200px;
  text-align: right;
}

https://jsfiddle.net/abalter/tyvx60zc/1/

FWIW, I also prefer using <label for="...

Upvotes: 0

tao
tao

Reputation: 90188

label {
   display: block;
   text-align: initial;
}
label>input {
   float: right;
}

Upvotes: 2

Related Questions