如何右对齐窗体输入框？ [英] How to right-align form input boxes?
本文介绍了如何右对齐窗体输入框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个看似容易解决的问题，但我很努力。如何使这两个输入与表单右侧对齐，而不使用BR元素？
<！DOCTYPE html>
< html>
< head>
< style type =text / css>
form {
text-align：right;
}
input {
width：100px;
}
< / style>
< / head>
< body>
< form>
< input name =declared_firstvalue =above/>
< br /> <！ - 我想摆脱这 - >
< input name =declared_secondvalue =below/>
< / form>
< / body>
< / html>
我只想让第一个输入显示在第二个输入的上方， / p>
解决方案
您可以使用右侧浮动并清除它们。
form {overflow：hidden;} input {float：right; clear：both;}
< form& < input name =declared_firstvalue =above/> < input name =declared_secondvalue =below/>< / form>
您还可以为父项设置从右到左的方向，并从输入中恢复默认的从左到右。使用 display：block 可以强制他们在不同的行。
form {direction：rtl;} input {display：block; direction：ltr;}
< form& < input name =declared_firstvalue =above/> < input name =declared_secondvalue =below/>< / form>
或现代的方式，flexbox布局
form {display：flex; flex-direction：column; align-items：flex-end;}
< form> ; < input name =declared_firstvalue =above/> < input name =declared_secondvalue =below/>< / form>
b
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.
解决方案
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>
这篇关于如何右对齐窗体输入框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
