logo标签列表

如何将表单输入框右对齐？

htmlcssalignment
60

我有一个看似简单的问题需要解决，但是很困难。我该如何让这两个输入框靠右对齐到表单中，而不使用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 元素如何影响排列？ - Waleed Khan
将输入内容包装在块元素中，例如 div。 - Musa
这些输入需要标签。http://www.w3.org/TR/WCAG20-TECHS/H44.html - danielnixon
8个回答
83

您可以使用浮动到右侧并清除它们。

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>

或者现代方式，弹性盒布局

form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

啊，好的。谢谢。我通过使表单变窄（并给它一个左边距）来解决了这个问题。不过还是很值得知道的 - 谢谢。 - ban-geoengineering
1
@cullub 清除浮动可以防止输入框水平堆叠，这样每个输入框都在不同的行上。在输入框后添加一个非浮动元素并使用overflow:hidden容器也是一个好主意，可以强制容器增长足够以包裹输入框。 - Oriol
21

试着使用这个：

<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
这非常巧妙。与Bootstrap完美配合。+1 - JoeGalind
除了负数和浮点数。 - PeterT
5

要仅影响文本输入框，请使用属性选择器

input[type="text"]

这样它就不会影响其他输入，只会影响文本输入。

https://www.w3schools.com/css/css_attribute_selectors.asp

例如，使用 div 并给它一个 ID 参考：

#divEntry input[type="text"] {
text-align: right;}
太简单了！谢谢你发布这个！我只是在我的Bootstrap输入框中添加了class="text-right"，就完成了。 - Phillip Senn
5
input { float: right; clear: both; }
1
浮动元素不需要 display: block;。CSS Float Theory: Things You Should Know：“所有浮动都变成块级盒子；标准规定，除非指定为 none，否则应忽略浮动的 display 属性。” 该文章继续指出将 display: inline; 作为 IE 修复方法，但在 IE7 之外（和过去）display 没有任何作用。 - thirdender
1
太棒了 - 我已经忘记了这个。我修正了我的答案。谢谢！ - alexvance
5

试试这个：

<!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>
2

使用一些标签来对齐输入元素。

因此：

<form>
   <div>
     <input>
     <br />
     <input>
    </div>
</form>

    .mydiv
     {
        width: 500px;
        height: 250px;
        display: table;
        text-align: right;
     }
0

尝试使用这个：

input {
  clear: both;
  float: right;
  margin-bottom: 10px;
  width: 100px;
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接