提问人：Ninita 提问时间：11/20/2013 更新时间：11/20/2013 访问量：60
如何将所有与html相关的字段放在同一行中？
How can I put all html related fields in the same line?
问：
我有一个观点：
<fieldset>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Number)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Number)
@Html.ValidationMessageFor(model => model.Number)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Date)
</div>
<div class="editor-field">
@Html.ValidationMessageFor(model => model.Date)
@Html.LabelFor(model => model.Date)
</div>
</fieldset>
但我希望其中一些表单字段在同一行中。我怎样才能得到这个？我准备好了，试图用'style='style=“margin： 0;填充：0“''，但我什么都没有。
答：
0赞
Knaģis
11/20/2013
#1
<div>默认情况下，元素具有样式。块意味着它扩展到容器的整个宽度，并且不允许内容在同一行中（浮动或绝对定位的对象除外，但这不是您需要的）。display:block
您需要将样式应用于标签和字段容器。此外，您可能需要添加另一个默认显示样式，该样式同时包含标签和字段，以便每行仅显示一个字段。display:inline-block<div>
有关示例，请参阅 http://jsfiddle.net/a4Lwc/1/。
评论
0赞
Ninita
11/20/2013
谢谢，这正是我想要的。现在我有这样的东西，看起来很棒：<fieldset> <div style="display:inline-block"> <div class="editor-label"> Name </div> <div class="editor-field"> Paola </div> </div> <div style="display:inline-block"> <div class="editor-label"> Number </div> <div class="editor-field"> 14 </div> </div> <div style="display:inline-block"> <div class="editor-label"> Date </div> <div class="editor-field"> 14/11/2013 </div> </div> </fieldset>
0赞
Hamid Bahmanabady
11/20/2013
#2
你应该分配float ，当你对div（或块元素）使用float时，让另一个元素位于它的一侧
<div class="editor-label" style=" float:left;">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field" >
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label" style=" float:left;">
@Html.LabelFor(model => model.Number)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Number)
@Html.ValidationMessageFor(model => model.Number)
</div>
评论