asp.net - 布局问题 CSS

Question

我是网络开发的新手，希望遵守该领域的“标准”。我知道 table 标签用于表格数据，而 div 标签用于布局(在 i-net 上进行了一些激烈的辩论)。

我正在尝试构建一个 View 布局，并且我正在尽最大努力使用 div。但是如何使用 div 准确地分隔元素呢？我过去常常在几秒钟内用 table 标签来做这件事。

现在这是我的布局:

如您所见，它的排列不整齐。

这是我的 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”的文本框完全一致。标签可以右对齐，与它们对应的文本框相对应。我希望我更清楚地表达了我的愿望。

Answer 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

希望它对你有用...