web-dev-qa-db-ja.com

css list inlineはアイテムを水平にリストしていませんか？

これが正しく表示されない理由がわかりません。リストは水平方向に表示することを目的としていますか？代わりに、垂直に表示されます！

これは私のコードです：

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>
htmlcsshtml-listsinline
15
getaway

追加するのを忘れたfloat: leftプロパティをCSSに追加：


#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

ちなみに、HTMLの例にはa開始タグがありません。する必要があります


<li><a href="#"><h1>53</h1></a></li>
20
Ventus

これは、h1要素がデフォルトでブロックレベルの要素であるためです。

追加：

h1 {display: inline; }

あなたのCSSに、彼らはあなたが望むように動作します。

別の注記として、1ページあたりのh1は1つだけにする必要があることに注意してください。他のすべての見出しは、意味的には、その見出しの下にあり、ある種の小見出しです。本と考えてください。本のタイトルはh1、章はh2などになります。

次に、HTMLを少し変更することをお勧めします。

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

しかし、おそらくそれは私だけかもしれません=）

これが私の見解を裏付ける記事です。

29
David Thomas

h1タグのデフォルトはdisplay:block;なので、これが優先されます。

また、</a>タグを閉じた後に<h1>タグがありますが、開始タグがありません。それは古いブラウザで問題を引き起こす可能性があります。

3番目に、lis内にh1タグを配置する目的は何ですか？意味的に、それは意味がありません。

4
Jeff Rupert

複数の解決策があります。表示するようにliを変更できます。インラインブロック;または表示するh1：インライン; （サイトごとに1つのh1のみを使用し、それを意味的に正しく使用することを覚えておいてください。実際にはh2または3ではない単語または文のスタイルを設定する場合は、スパン、EM、またはストロングを使用してください。

Inline-a-Tagがblock-whatever-Tagを囲むことができないことも重要です。これは、HTML5向けに開発していない場合は、a-Tagで何でも囲むことができるためです。

また、可能であれば、後方互換性を高めて達成できるものについては、フローティングを省略してください

2
sternAndy

SternAndyが示唆するようにdisplay: inline-blockを使用することは、おそらくここでの正しい解決策です。インラインは、ネストされた要素が内部にない要素以外には何の役にも立ちません。

1
B T