「width:50%」でリストが横並びにならない問題

web

この記事は「リストが横並びにならないを解決する記事。

display: inline-block;
width: 50%;
を
書いているのに、横並びにならない。

とりあえず「49%」にしたら
いちおう、横並んだ。

でも———
いらねえ余白が発生した。

コレの対処法を解説してゆく。

サクッと写真つきで。

『 li 』を、1行にすればよい。【結論】

『 li 』を、1行にすればよい。
結論:HTMLで『 li 』の改行をやめて、1行にすればおk。 

(※1行というか、「No改行」で続けて書く)

これを

html. listは2行。
html。listが、2行ある。

こうすると

「li」の改行をやめた。で、1行にした。
『 li 』の改行をやめた。で、1行にした。

こうなる。

HTMLの「li」を改行せずに、1行で書いたら、横並びになった。
横並んだ。各widthは、50/50。

cssは———これ。

css。
css。2行のみ。

まとめ

まとめ

以上。

HTMLで『 li 』の改行をやめるだけで解決。

もし———

width50%にしてるのに、横並びにならない。
widthを50%にしているのに、横並びにならない。

って、なったり———

widthを49%にすると横並びにはなるが、スキマがうまれてしまう。
widthを49%にすると横並びにはなるが、スキマがうまれてしまう。

って、なったら———

前述の方法で≪サクッ≫と直してみて くださいね~。

それでは、しばしの別れ。

広告