Html 如何右对齐表单输入框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12114966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to right-align form input boxes?
提问by ban-geoengineering
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 ?
我有一个看似容易解决的问题，但我正在挣扎。如何在不使用 BR 元素的情况下让这两个输入与表单右侧对齐？
<!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.
我只希望第一个输入出现在第二个输入上方，都在右侧。
回答by Oriol
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 directionto the parent and restore the default left-to-right on the inputs. With display: blockyou can force them to be on different lines.
您还可以direction为父级设置从右到左，并恢复输入的默认从左到右。有了display: block你可以迫使他们在不同的线路。
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
或者现代方式，flexbox 布局
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>回答by Marco
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>
回答by Ascension
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>
回答by alexvance
input { float: right; clear: both; }
回答by huncyrus
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;
}
回答by user2389922
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/
我在博客文章中回答了这个问题：https: //wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/它指的是这个小提琴：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.
剧透：float: right;是正确的方向，但需要多加注意才能获得整洁的结果。
回答by stalinrajindian
Try use this:
尝试使用这个：
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}
回答by Kim Wilson
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
https://www.w3schools.com/css/css_attribute_selectors.asp
example, use a div and give it an idea to refer to:
例如，使用一个 div 并给它一个参考：
#divEntry input[type="text"] {
text-align: right;}
