html - 我的元素不在同一行上 - 使用 "display:inline"

Question

请看一下代码并告诉我我做错了什么？我想让“嗨”出现在 table 的右边。我试过将“float:left”放在所有元素上并单独放在每个元素上。

<div style="display:inline">

<h1>Heading</h1>

<ul>
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

Answer 1

display 属性不会被所有子元素继承。您必须专门为 li 指定它，否则 list-item 的默认显示将用于 li

<div>

<h1>Heading</h1>

<ul>
<li style="display:inline"><h4>Reason 1</h4></li>
<li style="display:inline"><h4>Reason 2</h4></li>
<li style="display:inline"><h4>Reason 3</h4></li>
<li style="display:inline"><h4>Reason 4</h4></li>
<li style="display:inline"><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

为了消除我们使用 CSS 造成的困惑

<style>
#inline-list li{
    display: inline-block;//or inline as you like
}
</style>
<div>

<h1>Heading</h1>

<ul id="inline-list">
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1>Hi</h1>
</div>

或者你想要这样的东西吗？标题、列表和其他标题在同一行？

<div>

<h1 style="float:left">Heading</h1>

<ul style="float:left">
<li><h4>Reason 1</h4></li>
<li><h4>Reason 2</h4></li>
<li><h4>Reason 3</h4></li>
<li><h4>Reason 4</h4></li>
<li><h4>Reason 5</h4></li>
</ul>

<h1 style="float:left">Hi</h1>
</div>

http://jsfiddle.net/nXC8Z/