強く型付けされたビューで1行にラベルとテキストボックスを表示する方法

Question

私のラベルが上下に表示されます。入力ボックスが表示されます。同じ行に両方が必要です。

<fieldset> 
    <legend style="color:red">Enter Details</legend><br /> 

    <div style="color:red"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field" style="color:InfoBackground"> 
     @Html.EditorFor(model => model.Name) 
     @Html.ValidationMessageFor(model => model.Name) 
    </div><br/> 

    <div class="editor-field" style="color:red"> 
     @Html.LabelFor(model => model.Country) 
    </div> 
    <div class="editor-field" style="color: InfoBackground"> 
     @Html.EditorFor(model => model.Country) 
     @Html.ValidationMessageFor(model => model.Country) 
    </div><br/> 

    <div class="editor-label" style="color:red"> 
     @Html.LabelFor(model => model.Mobile_Number) 
    </div> 
    <div class="editor-field" style="color: InfoBackground"> 
     @Html.EditorFor(model => model.Mobile_Number) 
     @Html.ValidationMessageFor(model => model.Mobile_Number) 
    </div><br/> 

    <div align="center"><input type=submit" value="submit" /></div> 
</fieldset> 

どのような変更を行う必要があります。

Answer 1

デフォルトではdivが表示されていることを知っています：block.Soを表示したい場合はインラインで入力し、そのdivスタイルを更新してください。

style="display:inline-block;" 

Answer 2

あなたはdivにラップラベルを貼っていますか？ディビーズはdefault display:block.です。つまり、彼らは新しい行を強制します。

最も簡単なことは、@ Html.LabelForと@ Html.EditorForを同じdiv内に配置して、必要な効果を得るためにCSSを変更することです。