0

このようなWebフォームを作成する必要があります

列 列 - 列 列 列 列 - 列 列
ラベル: 入力 - ラベル: 入力
ラベル: 入力 - ラベル: 入力 - ラベル: 入力
ラベル: 入力 - ラベル: 入力
ラベル: 入力
ラベル: 入力 - ラベル: 入力
ラベル: 入力 - ラベル: 入力 - ラベル: 入力 - 入力: ラベル

等..

これを行うための最良の方法は何でしょうか？私はcssで達成する方法を試してきましたが、何度も何度も失敗しました。

私は先に進んでこれにテーブルを使用する必要がありますか、それともcssでこれを行う簡単な方法はありますか?

4

3 に答える 3

4

テーブルでそれを行うだけです。テーブルは、列と行を持つもののような表形式のデータには問題ありません...あなたの場合のように!

于 2009-02-21T02:30:20.453 に答える
1

例のフォーマットはかかりませんでしたか? ラベル、入力コントロール、およびスペースのみが必要な場合は、書式設定を一切行わずにコントロールをページに追加するだけです。HTML はそのようにレイアウトされます。

ただし、ある種の列が必要だと思います。いくつかの可能性があります。最も融通が利かないのは、コントロール (マークアップ) を完全に配置することです。

最も簡単なテーブルを使用できます。ただし、純粋主義者は、テーブルはレイアウトではなくデータ用であると主張するでしょう。

列を表す一連の DIV を float のままにすることもできます。1 つはラベル用、1 つは入力用、3 番目はラベル用、4 番目は入力用などです。

編集: ラベルがラベルと垂直に並んでいて、入力が入力と垂直に並んでいることを気にしない場合は、上記のいずれかの方法を選択して、各列に 1 つのラベルと入力のペアを配置するだけです。

于 2009-02-21T02:23:56.817 に答える
1

このようなものはどうですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

気に入った場合は、列に div の代わりにフィールドセットを使用することを検討してください。それらはスタイルが良く、よりセマンティックです。どちらの方法でもうまくいきます。

于 2009-02-25T05:38:28.080 に答える