我有一个看似容易解决的问题，但我正在苦苦挣扎。如何在不使用 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>
我只希望第一个输入出现在第二个输入上方，都在右侧。
您可以使用向右浮动并清除它们。
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>您还可以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>或者现代的方式，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>尝试使用这个：
<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>
input { float: right; clear: both; }
试试这个：
<!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>
要仅影响文本类型输入框，请使用属性选择器
输入[类型=“文本”]
这样它就不会影响其他输入，只会影响文本输入。
https://www.w3schools.com/css/css_attribute_selectors.asp
例如，使用 div 并给它一个参考的想法：
#divEntry input[type="text"] {
text-align: right;}
使用一些标签来对齐输入元素。所以
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
{
width: 500px;
height: 250px;
display: table;
text-align: right;
}
我在一篇博文中回答了这个问题：https ://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ 它指的是这个小提琴：https ://jsfiddle.net /wscherphof/9sfcw4ht/9/
剧透：float: right;是正确的方向，但只需要多花一点注意力就可以得到整洁的结果。
尝试使用这个：
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}