web-dev-qa-db-ja.com

フォーム入力ボックスを右揃えするには？

一見簡単に解決できる問題がありますが、苦労しています。 BR要素を使用せずに、これらの2つの入力をフォームの右に揃えるにはどうすればよいですか？

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

最初の入力が両方の右側の2番目の入力の上に表示されるようにします。

htmlcssalignment
38
ban-geoengineering

右にフローティングを使用してクリアできます。

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>
62
Oriol

これを使用してみてください：

<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>
12
Marco

これを試して：

<!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>
4
Ascension
input { float: right; clear: both; }
3
alexvance

タグを使用して、入力要素を揃えます。そう

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

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

テキストタイプの入力ボックスのみに影響を与えるには、属性セレクターを使用します

input [type = "text"]

この方法では、他の入力には影響せず、テキスト入力のみに影響します。

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

たとえば、divを使用して、参照するアイデアを与えます。

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

これを使用してみてください：

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

私はブログの投稿でこの質問に答えました： https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/ このフィドルを指します： https://jsfiddle.net/wscherphof/9sfcw4ht/9/

ネタバレ：float: right;は正しい方向ですが、きちんとした結果を得るにはもう少し注意が必要です。

0
user2389922