{float:位置;}でリストを横方向に並べることができます。
■ リストの表示位置
リストを表示できる位置は以下のとおりです。
位置 | 説明 |
none | リストの表示位置は指定しません。(デフォルト) |
left | リストが左に表示され文字(テキスト)が右に回り込みます。 |
right | リストが右に表示され文字(テキスト)が左に回り込みます。 |
【ブラウザ表示】
ここで回り込みが解除されました。
ソース
<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>
■ その他の項目
・
リストマークの種類を変える
・
リストマークの位置を指定する
・
リストマークを画像にする
・
リストマークを背景画像にする
・
リストマークを一括指定
・
余白、間隔を調整する
スタイルシート一覧のページに戻る
|