-1

我按照通常的 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 之前）强制一个新行而不向视图添加额外的标记？我知道通过向视图添加额外的标记会很简单，比如我为其分配 display: table-row 的新 div。但是我必须在每组标签/编辑器组合之间添加这个标记，这感觉就像违反了 DRY 原则。所以我想这样做而不需要做这个额外的标记。

4

1 回答 1

0

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

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

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

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

JS 小提琴演示。

当然，您可以使用不同的宽度来获得相同的结果，而无需将labelandinput元素不必要地包装在divs 中。

使用稍微更整洁的版本：

label, input {
    display: inline-block;
}

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

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

JS 小提琴演示。

The的声明很简单，这样, the和它margin-right的累积宽度就没有足够的空间让下一个占据同一行。labelinputmargin-rightlabel

于 2012-05-19T19:21:59.487 回答