フッター部分の横並びについて

こんな感じにフッター部分の文字列を横並びにする方法はありますか？

行動規範の内容に同意します

回答1件

様々な方法があります。
tableタグによるコーディングや、CSSで float:left; を用いた方法、
ブロック要素を display: inline-block; とする方法などです。

個人的には display: inline-block; が最も簡単だと思うのでそちらをお伝えします。

html
1<footer>
2  <article id="footer-sitemap">
3    <section>
4      <h2>企業情報</h2>
5      <ul>
6        <ol>リンク1</ol>
7        <ol>リンク2</ol>
8        <ol>リンク3</ol>
9        <ol>リンク4</ol>
10        <ol>リンク5</ol>
11        <ol>リンク6</ol>
12        <ol>リンク7</ol>
13        <ol>リンク8</ol>
14      </ul>
15    </section>
16    <section>
17      <h2>コミュニティ</h2>
18      <ul>
19        <ol>リンク1</ol>
20        <ol>リンク2</ol>
21        <ol>リンク3</ol>
22        <ol>リンク4</ol>
23      </ul>
24    </section>
25    <section>
26      <h2>ホスト</h2>
27      <ul>
28        <ol>リンク1</ol>
29        <ol>リンク2</ol>
30        <ol>リンク3</ol>
31        <ol>リンク4</ol>
32        <ol>リンク5</ol>
33        <ol>リンク6</ol>
34        <ol>リンク7</ol>
35        <ol>リンク8</ol>
36      </ul>
37    </section>
38    <section>
39      <h2>サポート</h2>
40      <ul>
41        <ol>リンク1</ol>
42        <ol>リンク2</ol>
43        <ol>リンク3</ol>
44        <ol>リンク4</ol>
45        <ol>リンク5</ol>
46      </ul>
47    </section>
48  </article>
49</footer>

CSS
1  //余分な余白を初期化します
2* { padding:0; margin:0; font-size:100%; font-weight:normal;}
3
4footer #footer-sitemap {
5  font-size: 1.2em;
6}
7
8footer #footer-sitemap section {
9  width: 250px; //ひとつひとつのブロックの幅です
10  margin-left: 80px;
11  display: inline-block; //これが肝
12  vertical-align: top; //ブロック要素を上揃え
13}
14
15footer #footer-sitemap section h2 {
16  font-weight: bold;
17  padding: 15px 0;
18}
19
20footer #footer-sitemap section ul {
21  list-style: none;
22}
23
24footer #footer-sitemap section ul ol {
25  padding: 15px 0;
26}