Question

我按照通常的ASP.Net MVC构建了一个带有字段标签div和字段编辑器div的编辑页面，产生以下HTML：

<div class="editor-label">
  <label for="Code">Project Code</label>
</div>
<div class="editor-field">
  <input id="Code" name="Code" type="text" value="" />
</div>

对于我的表单上有多个可编辑字段，将重复上面的一对div。默认情况下，这些只在页面上显示一个在另一个下面。我想要实现的是使用CSS在表格布局中显示页面。所以我的CSS是这样的：

.field-label, .field-editor{
display: table-cell;
}

这只是将它们全部显示在彼此相邻的单元格中，包装在浏览器窗口的末尾。如何在每个字段编辑器div之后（或在每个字段标签div之前）强制新行而不向视图添加额外标记？我理解通过向视图添加额外的标记可以很简单，就像我分配显示的新div：table-row。但是我必须在每组标签/编辑器组合之间添加这个标记，这只是违反了DRY原则。所以我想这样做而不需要做额外的标记。

Answer 1

鉴于上述HTML，以下CSS将起作用：

.editor-label, .editor-field {
    display: inline-block;
    width: 48%;
}

.editor-label {
    text-align: right;
}

这将允许元素共享同一行，并采用指定的宽度（在这种情况下相对于父元素的宽度）。 text-align声明只是将label的文字放在视觉上靠近input元素。

JS fiddle demo

当然，您可以使用不同的宽度获得相同的结果，而不会在label s中不必要地包裹input和div元素。

稍微整理一下版本：

label, input {
    display: inline-block;
}

label {
    text-align: right;
    width: 20%;
}

input {
    width: 30%;
    margin-right: 30%;
}

JS Fiddle demo

margin-right的声明只是为了使label，input及其margin-right的累积宽度为下一个label留下的空间不足占据同一条线。

使用css表显示定义多行

1 个答案: