どうも、チャーさんです。
あなたがliタグを横並びにしたい、
そう思っていませんか？
この記事では、liタグを横並びにする方法を、
書いています。
なので、あなたがliタグを横並びにしたいなら、
読んでみてください。
*この記事の情報の信頼性
この記事を書く僕は、プログラミング歴１年弱ぐらいです。
スポンサードサーチ
liタグを横並びにする方法
さて、早速結論ですが、
liタグで作ったメニューを、
横並びにする方法は、
display:inline; を使うことです。
ということで、早速具体例をみていきましょう。
まずは、普通にliタグを普通にかくと、
以下の画像のようになります。
しかし、ここに、
display;inline; をつけると、
はい、liタグ(menu)が横並びに、
なってくれましたね。
こんな風に、liタグは、
display:inline; をつけて、
インライン要素にすると横並びになるのです。
liタグが横並びになる理由、理論の説明
ちなみになぜdisplay:inlineで、
横並びになるのか？
ということの理論説明も書いときます。
まずinlineとは、みた通り、
インライン要素のことを意味します。
そしてこのインライン要素はブロック要素（縦に並ぶ）、
と違い横に並んでいく仕組みになっています。
liタグは何もしなければ、
ブロック要素で縦に並びます。
しかし、display:inline; をつけると
ブロック要素なのがインライン要素に変化します。
つまりliタグで作ったメニューも、
横並びになってくれるのです。
という訳で、display:inline;で、
横並びにできるという訳です。
理論説明でした。
スポンサードサーチ
liタグで横並びにする手順
では、どうやってliタグを横並びにするか、
一応説明します。
もう画像のコードでわかると思いますが、
１ liタグを書き、
２ そしてliタグに、display:inline; をつけましょう。
ここでポイントなのが、
親要素であるulや、olタグでなく、
子要素であるliタグにつけるという点です。
ulなどにdisplay:inline;をつけても、
liタグのメニューは横並びにならないので、
注意しましょう。
スポンサードサーチ
まとめ
それではまとめに入ります。
liタグを横並びにしたいなら、
display:inline;を使いましょう。
そしてそれをliタグにつけましょう。
そうすれば横並びになります。
では、liタグを横並びにする方法が、
これで伝わったと思います。
なので、早速あなた自身のエディターで、
試してみてください。
そうするとあなたのプログラミングスキルが、
上達しますよ。
ということで、まずはliタグを書くとこから、
始めましょう。
それでは、読んでもらってありがとうございました。
チャーさん
