在MVC中的輸入字段的DIV結構安排

我不是一個UI專家，並試圖用html實現下面的結構。這張照片幾乎是我自己解釋的。在MVC中的輸入字段的DIV結構安排

enter image description here

到目前爲止，我已經嘗試了一些東西，但沒有成功，我已經張貼了我的下面平庸的嘗試。任何幫助將不勝感激。

<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>

來源

2015-06-19 Ahsan

你的「企圖」不包含CSS。 – isherwood

@isherwood我嘗試了幾個浮動：左，浮動：右顯示：內聯等，只是試驗和錯誤，所以把它排除在外。 – Ahsan

好吧，我颳起瞭如何做到這一點上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; 
}

注意

在<i>的fa fa-question就是一個例子FontAwesome圖標，所以不要被那揭去。

來源

2015-06-19 15:39:53 Aeolingamenfel

以下是我可能會去了解它：

.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>

來源

2015-06-19 15:41:58 isherwood

如果你不知道你的容器的寬度或希望它自動，您可以使用display: inline-block;。

檢查這個佈局：

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; 
 
}

<div class="wrapper"> 
 
    <div class="label-wrap"> 
 
    <span>Lorem ipsum</span> 
 
    </div> 
 
    <div class="input-wrap"> 
 
    <input type="text" placeholder="Write here..."> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    <div class="opt-wrap"> 
 
    <span>?</span> 
 
    </div> 
 
</div>

來源

2015-06-19 15:42:59

在MVC中的輸入字段的DIV結構安排

回答

相關問題