CSSでのulがなぜか横並びになります。

Question

この２つのカテゴリーを縦並びにしたいのですが、片方だけできません。
どうか解決策をお願いします。
初歩的な質問ですみません。
html

<strong>最近の投稿</strong>
    <ul>
      <li class="q">書くためのテーマ</li>
      <li >2018年9月1日</li>
      <li class="q">画像付きの投稿</li>
      <li>2018年3月5日</li>
      <li class="q">引用付きの投稿</li>
      <li>2018年3月5日</li>
    </ul>
    <strong>カテゴリー</strong>
    <ul>
      <li class="q">サンプル投稿</li>
      <li class="q">投稿フォーマット</li>
      <li class="q">普通の投稿</li>
    </ul>

css

.q{
  color:blue;
  display: inline-block;
  border-bottom: 1px #aaa solid;
}

Comments

[SHOMI]

display: inline-block;
は横並び指定ですよ。

[m.ts10806]

縦にしたいならdisplay:inline;不要では？
なぜこう入れてますか？目指すイメージを図示してください

[new1ro]

> この２つのカテゴリーを縦並びにしたいのですが、片方だけできません。
「2つのカテゴリー」が、おそらく何なのかが伝わっていないので、補足お願いします。

[1] 「2つのカテゴリー」=「最近の投稿」と「カテゴリー」の2つ
→もうすでになっている??
→縦並びではなく横並びにしたい??

[2] 「カテゴリー」の中身を縦並びにしたい
「サンプル投稿」「投稿フォーマット」「普通の投稿」
→2つではなく3つでは?? 数を書き間違えている?

[3] 「最近の投稿」の「書くためのテーマ」と「2018年9月1日」の2つのことを"カテゴリー"と呼んでいて、
この2つを"横並び"にしたいが"縦"と書き間違えている??

[Masakun_exe]

みなさん指摘ありがとうございます。
inline-blockを指定しているのはborder-bottomの長さ調節のためです。
模写でこのページを作っているので修正しておきます。

[new1ro]

ありがとうございます。意図が伝わりました。

別件ですが、
「最近の投稿」の「書くためのテーマ」は<a>タグにしていたほうがいいと思います。

[Masakun_exe]

new1roさんこちらこそお時間さいていただきありがとうございます。
勉強になりました。m(__)m

Answer 1

追記してもらった内容に対しての回答です。

まず、<strong>と<ul>を1つの<div>や<section>で囲います (今回は「.footer-item」という名前)。
それらを更に、<div>や<section>で囲います (今回は「.footer-group」という名前)。

このような形になると思います。

<div class="footer-group">
 
  <!-- こちらに、「フッター右」と書かれたブロック (<div class="footer-item">) なども追加 -->

  <div class="footer-item">
    <strong>最近の投稿</strong>
    <ul>
      <li>
        <a class="q">書くためのテーマ</a>
        <span>2018年9月1日</span>
      </li>
      <li class="q">
        <a class="q">画像付きの投稿</a>
        <span>2018年3月5日</span>
      </li>
      <li class="q">
        <a class="q">引用付きの投稿</a>
        <span>2018年3月5日</span>
      </li>
    </ul>
  </div>

  <div class="footer-item">
    <strong>カテゴリー</strong>
    <ul>
      <li><a class="q">サンプル投稿</a></li>
      <li><a class="q">投稿フォーマット</a></li>
      <li><a class="q">普通の投稿</a></li>
    </ul>
  </div>

</div>

.footer-group {
  display: flex;
}
.footer-item {
  flex: 1 1 0%;
}