MVC中输入字段的DIV结构排列

Question

我不是UI专家，并尝试使用html实现以下结构。图像几乎可以解释我所追求的内容。

到目前为止，我已经尝试了一些事情，但是没有成功，我在下面发布了平庸的尝试。任何帮助将不胜感激。

<style>
    .field-wrapper{

    }
    .input-control-container
    {

    }
    .validation-message-container
    {

    }
    .help-icon-container
    {

    }
    .field-description-container
    {

    }
</style>
<div class="filed-wrapper">
    <div class="field-label-container">
        @Html.LabelFor(m => m.Email)
    </div>
    <div class="input-control-container">
        @Html.TextBoxFor(m => m.Email)
        <div class="field-description-container">
            Here goes the description
        </div>
    </div>
    <div class="validation-message-container">
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <div class="help-icon-container">
        <img src="/help-icon.png" /> <!--help popup handle by JavaScript--->
    </div>

Answer 1

好吧，我在JSFiddle上发了一个关于如何做到这一点的简单例子。

<强> HTML

<div class="FormElement">
    <div>
        <label for="test">Feild Label</label>
        <input type="text" id="test" name="test" placeholder="Feild Input" />
        <i class="fa fa-question">Icon</i>
    </div>
    <p>
        Some description text here
    </p>
</div>

我所做的就是将.FormElement的子div中的所有对象设置为display: inline-block，并将它们的宽度设置为页面的~33％。然后，我可以将标签的文本对齐到中心附近，并在底部有<p>跨越整个宽度。

<强> CSS

.FormElement label,
.FormElement input,
.FormElement i.fa
{
    display: inline-block;
    width: 32%;
}

.FormElement label
{
    text-align: right;
    padding: 0 0 10px 0;
}

.FormElement p
{
    text-align: center;
}

注意

fa fa-question中的<i>是一个示例FontAwesome图标，所以不要被它抛弃。

Answer 2

以下是我可以采取的措施：

.field-outer {
  display: table;
  text-align: center;
  margin: 20px auto;
}
.field-wrapper {
  display: table-row;
  text-align: center;
  background: pink;
}
.field-wrapper > div {
  display: table-cell;
  vertical-align: middle;
  padding: 6px 8px;
}
.input-control-container,
.field-label-container {
  text-align: right;
}
.help-icon-container {
  text-align: left;
  min-width: 40px;
}
.help-icon-container img {
  display: block;
}

<div class="field-outer">
  <div class="field-wrapper">
    <div class="field-label-container">
      <label for="blah">Label</label>
    </div>
    <div class="input-control-container">
      <textarea id="blah">Textarea</textarea>
    </div>
    <div class="help-icon-container">
      <img src="http://placehold.it/40x40" />
      <!--help popup handle by JavaScript--->
    </div>
  </div>
</div>
<div class="field-description-container">Here goes the description</div>
<div class="validation-message-container">@Html.ValidationMessageFor(m => m.Email)</div>

Answer 3

如果您不知道容器的宽度或想让它自动，您可以使用$matches。

检查此布局：

＆＃13;

＆＃13;

display: inline-block;

＆＃13;

body {
  text-align: center;
}
body * { box-sizing: border-box; }
.wrapper, .label-wrap, .input-wrap, .opt-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.input-wrap {
  width: 240px;
  text-align: left;
}
.input-wrap input {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
p {
  padding: 0;
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;