把元素排成一行

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/