如何将所有html相关字段放在同一行中？

我有这种形式在我的意见之一：如何将所有html相关字段放在同一行中？

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

，但我想这一些表单字段是在同一行的。我怎样才能得到这个？我已经尝试将div放入div中，'style ='style =“margin：0; padding：0”''但我没有任何东西。

来源

2013-11-20 Ninita

<div>元素默认具有display:block风格。块意味着它扩展到容器的整个宽度，并且不允许内容位于同一行（浮动或绝对定位的对象除外，但这不是您需要的内容）。

您需要将display:inline-block样式应用于您的标签和现场容器。另外，您可能需要添加另一个<div>，其中包含标签和字段的默认显示样式，以便每行仅显示一个字段。

查看http://jsfiddle.net/a4Lwc/1/的样本。

来源

2013-11-20 13:10:05

谢谢，这是exactally是我想要的。现在，我有这样的事情，很好看：'

Name

Paola

Number

Date

14/11/2013

' – Ninita

你应该分配浮动，当你使用浮动的股利（或块元素）的让另一个元素一边找到它

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

来源

2013-11-20 13:15:51

如何将所有html相关字段放在同一行中？

回答

相关问题