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 · Answer

input   float  right  clear  both

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

You can use floating to the right and clear them    x000D   x000D  form   x000D    overflow  hidden  x000D    x000D  input   x000D    float  right  x000D    clear  both  x000D    x000D   lt form gt  x000D     lt input name  declared first  value  above    gt  x000D     lt input name  declared second  value  below    gt  x000D   lt  form gt  x000D   x000D   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   x000D  form   x000D    direction  rtl  x000D    x000D  input   x000D    display  block  x000D    direction  ltr  x000D    x000D   lt form gt  x000D     lt input name  declared first  value  above    gt  x000D     lt input name  declared second  value  below    gt  x000D   lt  form gt  x000D   x000D   x000D    Or the modern way  flexbox layout   x000D   x000D  form   x000D    display  flex  x000D    flex-direction  column  x000D    align-items  flex-end  x000D    x000D   lt form gt  x000D     lt input name  declared first  value  above    gt  x000D     lt input name  declared second  value  below    gt  x000D   lt  form gt  x000D   x000D   x000D

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

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

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

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

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to alignment