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

你在div上使用内联并且不适用于内部项目

所以试试这个

<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>

Answer 3

如果您希望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

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

3 个答案: