横並び要素の幅を%で均等に指定しても、最後の要素が同じ行に入らない原因。

CSSで要素を均等横並びにする際、2つ並べたい場合は「width: 50%」と指定します。しかし、これだと2つ目の要素が次の行へ行ってしまい、2つ横並びにならないことがあります。

widthの合計値を100%ではなく99%にするとうまくいく場合は、ここで説明している方法で改善する可能性が高いです。

その原因を紹介します。

原因

原因は、要素と要素の間に、改行やスペースが入っているからです。

そのスペースの分も幅を取るので、最後の要素が同じ行に入りきらず、はみ出るということです。

直すには、改行やスペースを取り除いてみてください。うまくいくはずです。

 

つまり、次の書き方は間違いで、

<div id="col1">content</div>
<div id="col2">content</div>

次の書き方が正解です。

<div id="col1">content</div><div id="col2">content</div>

均等幅で横並びにする方法

要素を均等幅で横並びにしたい場合は、要素のstyleに

• display:inline-block を指定して、
• widthを指定します。

 

inline-blockが指定されていない場合には、widthが効かないですので注意してください。

widthには、n個の要素を並べる際には、次の値を指定します。

2個 width: 50%
3個 width: 33.3333%
4個 width: 25%
5個 width: 20%
6個 width: 16.6667%
7個 width: 14.2857%
8個 width: 12.5%
9個 width: 11.1111%
10個 width: 10%
11個 width: 9.0909%
12個 width: 8.3333%

まとめ

うまくいきましたでしょうか。参考になりましたら幸いです。

参考

stack overflow