HTML で箇条書きを揃える方法

Web デザイナーは、箇条書きやテキストを追加するだけでなく、箇条書きリストを使用します。箇条書きリストを作成するために使用される HTML タグは、メニューを作成したり、JavaScript がスライドショーにロードするための画像を整理したりするのに便利です。カスケード スタイル シート コードを箇条書きリスト (HTML スラングで「順序なしリスト」と呼ばれる) と組み合わせて使用​​することを学ぶと、いくつかのエキサイティングな Web デザインの可能性が開かれます。

ステップ 1

箇条書きリストを含む HTML ファイルを開き、 と タグをコードの先頭に配置します。タグがまだ存在しない場合は追加します。コードのどこかにタグが含まれている場合 タグがあり、CSS ファイルへの参照が含まれている場合は、代わりにそのファイルを開きます。 CSS コードは、タグの間または CSS ファイルの新しい行にあります。

ステップ 2

タグに「text-align」を設定して、すべての箇条書き内のテキストを揃えます。
タグは
• と
タグを使用して、それらを単一のリストの一部として定義します。
タグのテキストを配置すると、配置はすべての箇条書きのテキストに影響しますが、リスト自体はページの左または右に配置されません。以下は、"text-align" を設定する CSS コードの例です:

ul {text-align:right;}

箇条書きはテキストと一緒に移動しないことに注意してください。この場合、弾丸は左側に留まります。

ステップ 3

タグに「float」を設定して、リスト全体をページの左または右に揃えます。
タグで "float" を left または right に設定すると、箇条書きリスト全体がページの左または右に移動します。 float を次のように設定します:

ul {フロート:右;}

"float" は左または右に設定できますが、中央には設定できません。

ステップ 4

タグと タグをラップして、箇条書きリストをページの中央に配置するラッパーを作成します。結果のコードは次のようになります:
• リスト アイテム
• リスト アイテム

タグ自体は中央揃えになりません。 CSS を使用してすべてを中央に配置する必要があります。次のコードを