把元素排成一行

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/