Question

我有一个看似容易解决的问题，但我正在努力。如何在不使用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>

我只想让第一个输入显示在第二个输入的上方，两个都在右侧。

Answer 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>

Answer 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>

Answer 3

input { float: right; clear: both; }

Answer 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>

Answer 5

使用一些标记来对齐输入元素。所以

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

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

Answer 6

我在博文中回答了这个问题：https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ 它指的是这个小提琴：https://jsfiddle.net/wscherphof/9sfcw4ht/9/

剧透：float: right;是正确的方向，但需要更多的注意才能获得整洁的结果。

Answer 7

试试这个：

input {
  clear: both;
  float: right;
  margin-bottom: 10px;
  width: 100px;
}

Answer 8

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

输入[type =“text”]

这样它不会影响其他输入和文本输入。

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

示例，使用div并给它一个想法来引用：

#divEntry input[type="text"] {
text-align: right;}

如何右对齐表单输入框？

8 个答案: