https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

リストを並べる

{float:位置;}でリストを横方向に並べることができます。

■ リストの表示位置

リストを表示できる位置は以下のとおりです。

位置説明
noneリストの表示位置は指定しません。(デフォルト)
leftリストが左に表示され文字(テキスト)が右に回り込みます。
rightリストが右に表示され文字(テキスト)が左に回り込みます。

【ブラウザ表示】

  • HTML
  • CSS
  • html

ここで回り込みが解除されました。


ソース

<ul>
<li class="naraberu1">HTML</li>
<li class="naraberu1">CSS</li>
<li class="naraberu1">html</li>
</ul>
<p class="cl1">ここで回り込みが解除されました。</p>

外部ファイル

li.naraberu1{float:left;}
p.cl1{clear:both;}


<body>~</body>に直接記入する場合

<ul>
<li style="float:left;">HTML</li>
<li style="float:left;">CSS</li>
<li style="float:left;">html</li>
</ul>
<p style="clear:both;">ここで回り込みが解除されました。 </p>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

リストマークの種類を変える
リストマークの位置を指定する
リストマークを画像にする
リストマークを背景画像にする
リストマークを一括指定
余白、間隔を調整する

スタイルシート一覧のページに戻る