実現したい事
・HTMLで作成したリストを横並び表示にしたい
環境
・Windows 10
・Amazon Web Service (Cloud9)
手順
1-1
・HTMLファイルでリストを作成する
html_practice.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
<!--これがCSSファイルを外部から読み込むための記述-->
<link rel="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にコードを追加後の変化
このように左寄せから中央寄せにすることが出来ます。
