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

Question

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

Answer 1

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

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

<footer>
  <article id="footer-sitemap">
    <section>
      <h2>企業情報</h2>
      <ul>
        <ol>リンク1</ol>
        <ol>リンク2</ol>
        <ol>リンク3</ol>
        <ol>リンク4</ol>
        <ol>リンク5</ol>
        <ol>リンク6</ol>
        <ol>リンク7</ol>
        <ol>リンク8</ol>
      </ul>
    </section>
    <section>
      <h2>コミュニティ</h2>
      <ul>
        <ol>リンク1</ol>
        <ol>リンク2</ol>
        <ol>リンク3</ol>
        <ol>リンク4</ol>
      </ul>
    </section>
    <section>
      <h2>ホスト</h2>
      <ul>
        <ol>リンク1</ol>
        <ol>リンク2</ol>
        <ol>リンク3</ol>
        <ol>リンク4</ol>
        <ol>リンク5</ol>
        <ol>リンク6</ol>
        <ol>リンク7</ol>
        <ol>リンク8</ol>
      </ul>
    </section>
    <section>
      <h2>サポート</h2>
      <ul>
        <ol>リンク1</ol>
        <ol>リンク2</ol>
        <ol>リンク3</ol>
        <ol>リンク4</ol>
        <ol>リンク5</ol>
      </ul>
    </section>
  </article>
</footer>

  //余分な余白を初期化します
* { padding:0; margin:0; font-size:100%; font-weight:normal;}

footer #footer-sitemap {
  font-size: 1.2em;
}

footer #footer-sitemap section {
  width: 250px; //ひとつひとつのブロックの幅です
  margin-left: 80px;
  display: inline-block; //これが肝
  vertical-align: top; //ブロック要素を上揃え
}

footer #footer-sitemap section h2 {
  font-weight: bold;
  padding: 15px 0;
}

footer #footer-sitemap section ul {
  list-style: none;
}

footer #footer-sitemap section ul ol {
  padding: 15px 0;
}

あくまで一例ですのでもっとうまい方法があるかもしれません。

section内のh2タグについてはサイトの状況によって他の見出し要素を使う必要があります。
（他の見出しとの兼ね合い）

そして、全体をくくっている #footer-sitemap には幅を指定していないので、
画面サイズやブラウザのサイズで幅が収まりきらなくなると中身の要素が下に移動する点に気を付けてください。

Comments

[zakimaru]

わかりやすい回答ありがとうございます！
インラインブロックのやり方を使わせていただきます。