CODEWITHSUNDEEP
css
Ave
Ave

Reputation: 107

How to put text above input box?

https://jsfiddle.net/pqrbm0o0/

Currently, name/phone #/message/email is on the left side of the box how can i align it on the top left (not the top center)?

  <div class="col-sm-6">
            <h4><strong>Your Contact Information</strong></h4>
            <span style="color:#cc0000; margin-left:25px">&#8226; </span>Required fields.<br/>
            <br/>
            <div class="contact">
              <div class="block">
                <label>Name:</label>
                <input type="Name" style="width:250px;" />
                <span style="color:#cc0000;">&#8226; </span> </div>
              <div class="block">
                <label>Phone Number:</label>
                <input type="phone" style="width:250px;"/>
                <span style="color:#cc0000;">&#8226; </span> </div>
              <div class="block">
                <label>Email:</label>
                <input type="email" style="width:250px;"/>
                <span style="color:#cc0000;">&#8226; </span> </div>
              <div class="block">
                <label>Message:</label>

                <textarea name="Message"  id="Message" style="width:350px;"></textarea>
                <span style="color:#cc0000;">&#8226; </span> 
              </div>
            </div>

Upvotes: 1

Views: 11179

Answers (1)

chdltest
chdltest

Reputation: 873

In your CSS, apply the following styles:

.block label { display: block;
text-align: left;
}

This will allow it to be on its own line rather than inline and setting text align left should be fairly straightforward.

In case you don't know the difference between inline-block and block:

https://css-tricks.com/almanac/properties/d/display/

Upvotes: 6

Related Questions