0

我是网络开发的新手，想遵守该领域的“标准”。我已经了解 table 标签用于表格数据，而 div 标签用于布局（在 i-net 上进行了一些激烈的辩论之后）。

我正在尝试构建视图的布局，并且正在尽力使用 div。但是如何用 div 准确地分隔元素呢？我曾经在几秒钟内使用 table 标记执行此操作。

这是我现在的布局：

搜索视图布局

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

这是我的剃刀代码：

@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

为了获得最佳布局，请放入<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 回答
1

您可以在 CSS 类中添加宽度参数

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

对你的输入类做同样的事情，你会得到“表格”的外观。
如果将文本向右对齐，它会看起来不错。

于 2013-04-08T12:10:26.470 回答
0

你需要要么...

将您的标签和输入设置为display:block 这种方法最符合语义

或者

通过使用在每个输入后开始一个新行<br/>

或者

div用with包裹标签和字段display:block。 这样做可以让您min-width在您的上设置 alabel并产生表格布局的效果

于 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 回答