How to right-align form input boxes

Question

I have a seemingly easy problem to solve  but am struggling  How do I get these two inputs to align to the right of the form  without using the BR element     lt  DOCTYPE html gt   lt html gt   lt head gt       lt style type  text css  gt      form           text-align  right            input           width  100px             lt  style gt   lt  head gt    lt body gt       lt form gt            lt input name  declared first  value  above    gt             lt br  gt   lt  -- I want to get rid of this -- gt             lt input name  declared second  value  below    gt       lt  form gt   lt  body gt   lt  html gt    I just want the first input to appear above the second input  both on the right hand side

User · Accepted Answer

You can use floating to the right and clear them.

_x000D_

form {_x000D_
  overflow: hidden;_x000D_
}_x000D_
input {_x000D_
  float: right;_x000D_
  clear: both;_x000D_
}

_x000D_

<form>_x000D_
  <input name="declared_first" value="above" />_x000D_
  <input name="declared_second" value="below" />_x000D_
</form>

_x000D_

You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.

_x000D_

form {_x000D_
  direction: rtl;_x000D_
}_x000D_
input {_x000D_
  display: block;_x000D_
  direction: ltr;_x000D_
}

_x000D_

<form>_x000D_
  <input name="declared_first" value="above" />_x000D_
  <input name="declared_second" value="below" />_x000D_
</form>

_x000D_

Or the modern way, flexbox layout

_x000D_

form {_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
  align-items: flex-end;_x000D_
}

_x000D_

<form>_x000D_
  <input name="declared_first" value="above" />_x000D_
  <input name="declared_second" value="below" />_x000D_
</form>

_x000D_

User · Answer

Try use this   input     clear  both    float  right    margin-bottom  10px    width  100px

User · Answer

Use some  tag  to aligning the input element   So   lt form gt      lt div gt        lt input gt        lt br   gt        lt input gt       lt  div gt   lt  form gt        mydiv                width  500px          height  250px          display  table          text-align  right

User · Answer

To affect ONLY text type input boxes use the attribute selector  input type  text     This way it will not affect other inputs and just text inputs   https   www w3schools com css css attribute selectors asp  example  use a div and give it an idea to refer to    divEntry input type  text     text-align  right

User · Answer

Try use this    lt html gt   lt body gt      lt input type  text  style  direction  rtl   value  1  gt      lt input type  text  style  direction  rtl   value  10  gt      lt input type  text  style  direction  rtl   value  100  gt   lt  body gt   lt  html gt

User · Answer

input   float  right  clear  both

User · Answer

I answered this question in a blog post  https   wscherphof wordpress com 2015 06 17 right-align-form-elements-with-css  It refers to this fiddle  https   jsfiddle net wscherphof 9sfcw4ht 9   Spoiler  float  right  is the right direction  but it takes just a little more attention to get neat results

User · Answer

Try this    lt  DOCTYPE html gt   lt html gt   lt head gt       lt style type  text css  gt      p           text-align  right            input           width  100px             lt  style gt   lt  head gt    lt body gt       lt form gt           lt p gt               lt input name  declared first  value  above    gt           lt  p gt           lt p gt               lt input name  declared second  value  below    gt           lt  p gt       lt  form gt   lt  body gt   lt  html gt

[html] How to right-align form input boxes?

Examples related to html

Examples related to css

Examples related to alignment