ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >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>

■ その他の項目

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

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

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.