実現したい事
・HTMLで作成したリストを横並び表示にしたい
環境
・Windows 10
・Amazon Web Service (Cloud9)
手順
1-1
・HTMLファイルでリストを作成する
html_practice.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>HTMLの練習</title></head><body><ul><li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li></ul></body></html>1-2
上記の記述の状態でのリストの並び方の画像
画像のように縦並びになっています。
2-1
リストの横並び表示の実装
・HTMLにCSSファイルを読み込むコードを記述
html_practice.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>HTMLの練習</title><!--これがCSSファイルを外部から読み込むための記述--><linkrel="stylesheet"href="css_practice.css"></head><body><ul><li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li></ul></body></html>・CSSファイルに以下のコードを記述
css_practice.css
li{display:inline-block;list-style:none;}・CSS記述後のリストの変化
下記の画像のように横並びになります。
その他
リストを横並びにして中央寄せにしたい場合
・CSSに以下のコードを記述する
css_practice.css
/*親要素であるulにリストを中央寄せにするコードを記述*/ul{text-align:center;}li{display:inline-block;list-style:none;}・CSSにコードを追加後の変化
このように左寄せから中央寄せにすることが出来ます。
