web-dev-qa-db-ja.com

テキストの長さに関係なく、ラベルと入力フィールドの間にスペースを均等に追加するにはどうすればよいですか？

10個の入力フィールドがあり、左側の入力フィールドの前に、ユーザーがフィールドに入力する内容を示すテキストを保持するspanタグがあるとします。私はいくつかのことをしましたが、テキストの大きさに関係なく、spanタグと入力フィールドの間にスペースを追加する方法がわかりませんか？

このような：

enter image description here

cssformscss3html
17
starbucks

2019年の回答：

時間が経ち、フォームを作成するときのアプローチを変更しました。今日まで何千回もやりましたが、すべてのlabel/inputペアなので、これはトイレに流されました。 inputをlabelに直接入れると、物事は同じように機能し、IDは不要です。 flexboxも非常に柔軟であるという利点を活用しました。

HTML：

<label>
  Short label <input type="text" name="dummy1" />
</label>

<label>
  Somehow longer label <input type="text" name="dummy2" />
</label>

<label>
  Very long label for testing purposes <input type="text" name="dummy3" />
</label>

CSS：

label {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
  width: 400px;
  line-height: 26px;
  margin-bottom: 10px;
}

input {
  height: 20px;
  flex: 0 0 200px;
  margin-left: 10px;
}

フィドルデモ

元の回答：

labelの代わりにspanを使用します。入力とペアにすることを意図しており、いくつかの追加機能を保持します（ラベルをクリックすると、入力がフォーカスされます）。

これはまさにあなたが望むものかもしれません：

HTML：

<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">

<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">

<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">

CSS：

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle DEMO here。

20
Petr Čihula

これは、新しいCSS display: grid（ ブラウザサポート ）

HTML：

<div class='container'>
  <label for="dummy1">title for dummy1:</label>
  <input id="dummy1" name="dummy1" value="dummy1">
  <label for="dummy2">longer title for dummy2:</label>
  <input id="dummy2" name="dummy2" value="dummy2">
  <label for="dummy3">even longer title for dummy3:</label>
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

CSSグリッドを使用する場合、デフォルトでは、要素は列ごとに配置され、行ごとに配置されます。 grid-template-columnsルールは2つのグリッド列を作成します。1つは合計水平スペースの1/4を占め、もう1つは水平スペースの3/4を占めます。これにより、目的の効果が得られます。

grid

JS-FIDDLE

6
0xcaff

テーブルを使用できます

<table class="formcontrols" >   
    <tr>
        <td>
            <label for="Test">FirstName:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            <label for="Test">Last name:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

結果は次のようになります。 ImageResult

2
Jorciney

以下のコードも使用できます

<html>
<head>
    <style>
        .labelClass{
            float: left;
            width: 113px;
        }
    </style>
</head>
<body>
  <form action="yourclassName.jsp">
    <span class="labelClass">First name: </span><input type="text" name="fname"><br>
    <span class="labelClass">Last name: </span><input type="text" name="lname"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>
2
Divyesh Rupawala