1

コードを見て、何が間違っているのか教えてください。「こんにちは」をテーブルの右側に配置したい。すべての要素とそれぞれに個別に「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>
4

3 に答える 3

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/

于 2013-07-22T01:10:20.137 に答える
0

とを 1 行h1に表示したい場合(部屋が許す限り)、次のものが必要です。ulh1inline-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>

個々のリスト アイテムを同じ 1 行に表示する場合は、次を追加します。

.inlines li {
  display: inline-block;
}

例については、次の CodePen を参照してください: http://cdpn.io/GLhqK

于 2013-07-22T01:20:14.237 に答える
0

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>
于 2013-07-22T01:11:09.683 に答える