html - MVC中输入字段的DIV结构安排

Question

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

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

<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图标，所以不要被它抛弃。