html - 我的元素不在同一行 - 使用“display：inline”

Question

请看一下代码并告诉我我做错了什么？我想要“嗨”到桌子的右边。我尝试将“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/

Answer 2

如果您想要h1,ul和h1显示在一行中（房间允许），您需要inline-block：

<style>
.inlines {
  display: inline-block;
}
</style>

<div>

<h1 class="inlines">Heading</h1>

<ul class="inlines">
  <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 class="inlines">Hi</h1>
</div>

如果您希望单个列表项位于同一行中，请添加：

.inlines li {
  display: inline-block;
}

例如，请参阅此 CodePen：http ://cdpn.io/GLhqK

Answer 3

您在 div 上使用 inline 并且不适用于内部项目

所以试试这个

<style>div * {display:inline;}</style>

或在 css 中分别将每个项目内联

我从你的问题中了解到你想要

<div>

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

<ul style="float:left;">
<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 style="float:right;">Hi</h1>
</div>