0

私は Web 開発に不慣れで、この分野の「標準」を遵守したいと考えています。table タグは表形式のデータ用であり、div タグはレイアウト用に使用されることを理解しました (i-net であちこちで激しい議論がありました)。

ビューのレイアウトを構築しようとしていますが、div を使用するために最善を尽くしています。しかし、div を使用して要素を正確に配置するにはどうすればよいでしょうか? 私は数秒でテーブルタグでこれを行っていました。

これは私のレイアウトです：

searchView レイアウト

ご覧のとおり、きれいに並べられていません。

これは私のRazorコードです:

@model WebHIS___ArtsPortaalWeb.Models.SearchPatientModel
@using (Html.BeginForm()) {
    <div>
        <div class="editor-label">
            Voornaam:</div>
       <div class="editor-field">@Html.TextBoxFor(model => model.FirstName)</div>
        <div class="editor-label">
            Achternaam:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.LastName)</div>
        <div class="editor-label">
            GeboorteDatum:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.DateOfBirth, new {@class = "datafield", type = "date" })</div>
        <div class="editor-label">
            BSN:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.BSN)</div>
        <div class="editor-label">
        Straat:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.Street)</div>
        <div class="editor-label">
            Huisnummer:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.HouseNumber)</div>
        <div class="editor-label">
            Postcode:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.Zipcode)</div>
        <div class="editor-label">
            Plaats:</div>
        <div class="editor-field">@Html.TextBoxFor(model => model.City)</div>
        <input type="submit" value="Sumbit" />
    </div>
}

私のCSS：

.display-label, 
.editor-label {
    margin: 1em 0 0 0;
    float: left; 
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
    float: left;
}

助けてくれてありがとう。

更新:どうやら私の質問は明確ではありませんでした。レイアウトを画像のように見せたいのですが、テキストボックスがきちんと並んでいます。したがって、「voornaam」のテキスト ボックスは、「straat」のテキスト ボックスと正確に一致します。ラベルは、対応するテキストボックスに対して右揃えにすることができます。願いをより明確にできたらと思います。

4

4 に答える 4

1

CSSクラスに幅パラメータを追加できます

.editor-label { margin: 1em 0 0 0; float: left; width: 150px; }

入力クラスで同じことを行うと、「テーブル」の外観が得られます。
テキストを右揃えにすると見栄えがよくなります。

于 2013-04-08T12:10:26.470 に答える
1

最高のレイアウトのためにあなたを入れてください<table>

<table>
    <tr>
        <td>Voornaam:
        </td>
        <td>Your text box.....
        </td>
        <td>Achternaam:
        </td>
        <td>Your text box.....
        </td>
        <td>thirdname:
        </td>
        <td>Your text box.....
        </td>
    </tr>
    <tr>
        <td>fourthname:
        </td>
        <td>Your text box.....
        </td>
        <td>fifthname:
        </td>
        <td>Your text box.....
        </td>
        <td>sixthname:
        </td>
        <td>Your text box.....
        </td>
    </tr>
</table>

または、Blowsie が述べたように、ラベルとテキストボックスの表示プロパティを使用して「ブロック」することもできます。

display:block

それがあなたのために働くことを願っています...

于 2013-04-08T12:09:28.713 に答える
0

あなたはどちらかをする必要があります...

ラベルと入力を次のように設定します。display:block このアプローチは最もセマンティックです

また

を使用して、各入力の後に新しい行を開始します<br/>

また

ラベルとフィールドを with で囲みdivますdisplay:block。 これを行うと、上にを設定し、テーブル レイアウトの効果を与えることができます。min-widthlabel

于 2013-04-08T12:03:10.140 に答える
0

まず<label>、ラベルの要素を使用してみてください。

<label for="[input_ID]">Voornaam></label><input ... />

そして、あなたが達成しようとしている外観は何ですか？どのようなレイアウトを実現したいのか明確に述べていませんでした。すべてのラベルを同じサイズにしますか? ラベルと入力の組み合わせを同じサイズにする場合は、Razor コードを次のように記述します。

<div class="editor-field">
    <label>Voornaam:</label>
    @Html.TextBoxFor(model => model.FirstName)
</div>

... 次の CSS を使用します。

.editor-field {
    box-sizing: border-box;
    float: left;
    overflow: hidden;
    width: 25%;
}
.editor-field label, .editor-field input {
    float: left;
    display: block;
}
.editor-field label {
    width: (set fixed width here);
}

[編集]: OP からのいくつかの明確化の後、コードを修正しました。OP は、ラベルを入力要素とインラインにすることを望んでいました。

于 2013-04-08T12:30:34.163 に答える