如何右对齐表单输入框？
Posted
技术标签:
【中文标题】如何右对齐表单输入框？【英文标题】：How to right-align form input boxes? 【发布时间】：2012-08-20 08:18:54 【问题描述】：我有一个看似容易解决的问题，但我正在苦苦挣扎。如何在不使用 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>
我只希望第一个输入出现在第二个输入的上方，都在右侧。
【问题讨论】：
br 元素如何导致对齐？
将输入包装在块元素中，如 divs
这些输入需要标签。 w3.org/TR/WCAG20-TECHS/H44.html
【参考方案1】：
您可以使用浮动到右侧并清除它们。
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>【讨论】：
啊，很好。干杯。我实际上是通过使表单更窄（并给它一个左边距）来解决它。 Deffo 值得了解 - 谢谢。 @cullub Clearance 防止输入水平堆叠，这样每个输入都在不同的行中。在输入之后添加一个带间隙的非浮动元素或在容器上使用overflow:hidden 也可能是一个好主意，以强制它增长到足以包裹输入。【参考方案2】：
试试这个：
<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>
【讨论】：
这很巧妙。与引导程序完美配合。 +1【参考方案3】：input float: right; clear: both;
【讨论】：
浮动元素不需要display: block;。 CSS Float Theory: Things You Should Know：“所有浮点数都成为块框；标准规定浮点数的显示属性将被忽略，除非它被指定为无”。文章继续指出 display: inline; 作为 IE 修复程序，但除此之外（以及过去的 IE7）display 什么也不做。
太棒了 - 忘记了这一点。修正了我的答案。谢谢！【参考方案4】：
试试这个：
<!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>
【讨论】：
【参考方案5】：要仅影响文本类型的输入框，请使用属性选择器
输入[type="text"]
这样它不会影响其他输入，只会影响文本输入。
https://www.w3schools.com/css/css_attribute_selectors.asp
例如，使用一个 div 并给它一个参考的想法：
#divEntry input[type="text"]
text-align: right;
【讨论】：
如此简单！谢谢你张贴这个！我刚刚将 class="text-right" 添加到我的引导输入和 wallah。【参考方案6】：使用一些标签来对齐输入元素。 所以
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
width: 500px;
height: 250px;
display: table;
text-align: right;
【讨论】：
【参考方案7】：我在一篇博文中回答了这个问题：https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ 它指的是这个小提琴：https://jsfiddle.net/wscherphof/9sfcw4ht/9/
剧透：float: right; 是正确的方向，但需要多花点心思才能获得整洁的结果。
【讨论】：
【参考方案8】：试试这个：
input
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
【讨论】：
以上是关于如何右对齐表单输入框？的主要内容，如果未能解决你的问题，请参考以下文章