asp.net-mvc - 将元素放在一行中

Question

我正在尝试将 H2 和 Div 排成一行但不起作用

我哪里有错误？

<div style="display:inline"><h2>LISTA DE SEDES</h2> |<div class="Create">  @Html.ActionLink("Create", "Create")</div></div>

Answer 1

和<h2>内部 div 应该有display:inline;，而不是外部 div。

Answer 2

尝试这个：

<div style="display:inline"><h2 style="display:inline;">LISTA DE SEDES</h2> |<div class="Create" style="display:inline;">  @Html.ActionLink("Create", "Create")</div></div>

你应该看到：

LISTA DE SEDES | @Html.ActionLink("Create", "Create")

内联显示。你也可以用浮点数来做：

<style type="text/css">
.float_left {
    float:left;
}
.clear {
    clear:both;
}
</style>
<div class="float_left">
<h2 style="display:inline;">LISTA DE SEDES</h2>
</div> 
<div class="float_left"> | </div> 
<div class="float_left"><div class="Create">  @Html.ActionLink("Create", "Create")</div></div>
<div class="clear"></div>

Answer 3

如果您希望嵌套<div>显示与您的内联，则<h2>需要应用于display: inline嵌套 div 本身。默认情况下，标题元素也显示为块，因此您需要指定您<h2>的也显示内联。

<div><h2 style="display: inline">LISTA DE SEDES</h2> |<div class="Create" style="display: inline">  @Html.ActionLink("Create", "Create")</div></div>​

在此处查看演示：http: //jsfiddle.net/t5FEX/

Answer 4

嘿，你应该使用display inline-block

像这样

<div  style="display: inline-block;">
<h2 style="display: inline-block;">LISTA DE SEDES</h2> |
<div class="Create"  style="display: inline-block;">  @Html.ActionLink("Create", "Create")</div>
</div>

​​​​​​​​​​现场演示http://jsfiddle.net/rohitazad/t5FEX/1/