CODEWITHSUNDEEP
htmlcssalignment
Boycott A.I.
Boycott A.I.

Reputation: 18871

How to right-align form input boxes?

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 ?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    form {
        text-align: right;
    }
    input {
        width: 100px;
    }
    </style>
</head>

<body>
    <form>
         <input name="declared_first" value="above" />

         <br/> <!-- I want to get rid of this -->

         <input name="declared_second" value="below" />
    </form>
</body>
</html>

I just want the first input to appear above the second input, both on the right hand side.

Upvotes: 61

Views: 321228

Answers (8)

Kim Wilson
Kim Wilson

Reputation: 107

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;}

Upvotes: 5

stalinrajindian
stalinrajindian

Reputation: 1431

Try use this:

input {
  clear: both;
  float: right;
  margin-bottom: 10px;
  width: 100px;
}

Upvotes: 0

Oriol
Oriol

Reputation: 288270

You can use floating to the right and clear them.

form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

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.

form {
  direction: rtl;
}
input {
  display: block;
  direction: ltr;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Or the modern way, flexbox layout

form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

Upvotes: 83

Marco
Marco

Reputation: 229

Try use this:

<html>
<body>
   <input type="text" style="direction: rtl;" value="1">
   <input type="text" style="direction: rtl;" value="10">
   <input type="text" style="direction: rtl;" value="100">
</body>
</html>

Upvotes: 22

wscherphof
wscherphof

Reputation: 61

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.

Upvotes: 0

Ascension
Ascension

Reputation: 2759

Try this:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p {
        text-align: right;
    }
    input {
        width: 100px;
    }
    </style>
</head>

<body>
    <form>
        <p>
            <input name="declared_first" value="above" />
        </p>
        <p>
            <input name="declared_second" value="below" />
        </p>
    </form>
</body>
</html>

Upvotes: 5

alexvance
alexvance

Reputation: 1124

input { float: right; clear: both; }

Upvotes: 6

huncyrus
huncyrus

Reputation: 658

Use some tag, to aligning the input element. So

<form>
   <div>
     <input>
     <br />
     <input>
    </div>
</form>

    .mydiv
     {
        width: 500px;
        height: 250px;
        display: table;
        text-align: right;
     }

Upvotes: 2

Related Questions