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