65

私は次のようなHTMLフォームを持っています：

 <html>
  Name:<input type="text"/></br>
  Email Address:<input type="text"/></br>
  Description of the input value:<input type="text"/></br>
 </html>

これで、ラベルはすべて同じ列で始まりますが、テキストボックスは、ラベルのテキストの長さに応じて異なる位置で始まります。

すべての「：」とテキストボックスが同じ位置で始まり、前のテキストが「：」まで右揃えになるように、入力フィールドを揃える方法はありますか？

これを達成するのに役立つ場合は、CSSを使用しても問題ありません。

4

7 に答える 7

105

ワーキング JS フィドル

HTML:

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}
于 2012-06-03T07:56:55.937 に答える
25

ラベルを使用できます（JsFiddleを参照）

CSS

label { display: inline-block; width: 210px; text-align: right; }

HTML

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br />
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
 </html>

または、これらのラベルをテーブルで使用できます ( JsFiddle )

<html>
    <table>
        <tbody>
            <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
            <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
            <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
        </tbody>
    </table>
 </html>
于 2012-06-03T07:38:34.517 に答える
3

フォーム要素に幅を設定し（これはあなたの例に存在するはずです！）、入力要素をフロート（およびクリア）します。また、br 要素をドロップします。

于 2012-06-03T07:43:39.837 に答える
1

私の場合、私は常にこれらのものを次のようにapタグに入れます

<p> name : < input type=text /> </p>

など、css を次のように適用します。

p {
  text-align:left;
}

p input {
  float:right;
}

p タグの幅を指定する必要があります。これは、入力タグが完全にフロートするためです。

この css は送信ボタンにも影響します。このタグのルールをオーバーライドする必要があります。

于 2012-06-03T08:13:11.803 に答える
1

このアプローチが以前に行われたことは知っています. しかし, テーブルを使えば, レイアウトは簡単に生成できると思います. これはベストプラクティスではないかもしれません.

JSFiddle

HTML

<table>

    <tr><td>Name:</td><td><input type="text"/></td></tr>

    <tr><td>Age:</td><td><input type="text"/></td></tr>

</table>

<!--You can add the fields as you want-->

CSS

td{
    text-align:right;
}
于 2013-07-09T03:51:56.893 に答える
0

ラベルに幅を指定すると、入力タイプが自動的に整列されました。

input[type="text"] {
    width:100px;
	height:30px;
	border-radius:5px;
	background-color: lightblue;
	margin-left:2px;
  position:relative;
}

label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;

}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>

于 2015-06-26T15:25:30.793 に答える