如何右对齐窗体输入框? [英] 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屋!