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>

我所做的就是设置.FormElementto 子的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图标,所以不要通过揭去.