Menu
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.
410
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.
if you want to move everything to right, use css "float: right". @DiGiTAL_DOMAiN: You can add a margin-right to push it back a bit.
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>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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
