Question

想要在同一行上有2个标签和输入字段。

像这样 - 例如下划线 - 将是输入框：

姓名：________ JOBNO：________

我在我看来有这个，它正在显示标签＆amp;在1行编辑框：

    <div class="editor-label">
        @Html.LabelFor(model => model.NAME)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.NAME)
        @Html.ValidationMessageFor(model => model.NAME)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.JOBNO)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.JOBNO)
        @Html.ValidationMessageFor(model => model.JOBNO)
    </div>

我是否必须使用表格来显示数据 - 在我的详细信息视图中使用了一个表格，但对于EDIT视图却没有那么好用。这是一个拥挤的形式，页面上的一行是不会做的。这似乎是一个常见的但无法找到如何做到的例子。有什么建议或有用的怎么样？

Answer 1

CSS完全可以实现。这是一个非常简单的解决方案，只需使用float：

.editor-label, .editor-field {
    float: left;
    margin-right: 15px;
}

<div class="editor-label">
    <label>Field #1</label>
</div>
<div class="editor-field">
    <input type="text" />
</div>
<div class="editor-label">
    <label>Field #2</label>
</div>
<div class="editor-field">
    <input type="text' />
</div>

使用float并不是非常理想 - 你可能想要一个更复杂的布局系统。看一下Bootstrap或其他CSS框架。

编辑

根据您的要求，这是使用Bootstrap 3网格系统的示例。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal">
  <div class="row">
    <div class="col-xs-6">
      <div class="form-group">
        <label class="control-label col-xs-3">Field 1</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" />
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="form-group">
        <label class="control-label col-xs-3">Field 2</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" />
        </div>
      </div>
    </div>
  </div>
</form>

Answer 2

标签和输入默认显示为内联，因此您只需删除div。

＆＃13;

<label>Field #1</label>
<input type="text" />
<label>Field #2</label>
<input type="text' />

＆＃13;

使用css

2 个答案: