CODEWITHSUNDEEP
htmlcss
Uncode
Uncode

Reputation: 189

How to align textbox to the right?

I have the a textbox used as a search field as follows that I want to align to the right:

<div class="col-md-6 search-form" style="padding:13px 0;">
    <form action="/search" method="post">
       <input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
    </form>
</div>

I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it

.new-search-div {
  display: inline-block;
  text-align: right;
}

Here's a screenshot of where I am trying to align it... align textbox right

Upvotes: 2

Views: 26789

Answers (3)

Fluchaa
Fluchaa

Reputation: 116

Already tried to give the Input a float: right; ?

Upvotes: 0

bob
bob

Reputation: 993

text-align:right; will only right align text elements.

It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.

 <form action="/search" method="post" class="pull-right">
    <input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
  </form>

Upvotes: 4

R&#225;pli Andr&#225;s
R&#225;pli Andr&#225;s

Reputation: 3923

Don't use align:right;, there's no such CSS rule, use float:right; instead.

(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)

Upvotes: 2

Related Questions