文字がそろわない、線が途中でとぎれてしまう

Question

wordpressで一部実装で悩んでいる部分があり、悩んでおります。
部分的には新着情報のメッセージを文字をそろえ、かつ線を引くのみになります。
(ただし、PHPの各パラメータ(３つ)で表示しているため、文字がそろわず、かつ、線が途中でとぎれてしまう)
宜しくお願い致します。
ソースコードはこちらになります。
また画像も添付致しました、上が理想状態、下が現在の問題個所になります。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <style type="text/css"> .s8 { color: #004EA2; font-family:"Microsoft JhengHei", sans-serif; font-style: normal; font-weight: normal; text-decoration: none; font-size: 9.5pt; } </style> <div class "text2"> </div> <article id="post-<?php the_ID(); ?>"<?php post_class('news'); ?>> <nav class="inline-block-test"> <ul> <li><a href=""><?php the_category(); ?></a></li> <li><a href=""><time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日(l)') ?></time></a></li> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?> <?php the_excerpt(); ?></a> </ul> </nav>](e119b4c85651e37592f3a0798df5468a.png)](bf2039a16085d93ed5aa232a6bd222cb.png)](032680c6dd8d0e8e0ba800b828871d4c.png)

Comments

[kei344]

HTMLの組み方とCSSの問題なので、CSSも提示されたほうが良いです。

[proguramar]

お忙しいところ、ありがとうございます、上記ソースコードご参考にさせて頂きまましたところ、要素が再び縦にならんでしまいました。また線はこのような状態になっております(画像添付いたしました)

[proguramar]

申し訳ございません、只今キャッシュが残っていました、再度確認してみます、ありがとうございます

Answer 1

以下のような形でいかがでしょうか?
1つのliの中に、カテゴリーと日付とタイトルを含めるのが自然と考えます。
(タイトル部分だけクリックできる前提です。)

<nav class="inline-block-test">
  <ul>
    <li>
      <span><?php the_category(); ?></span>
      <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日(l)') ?></time>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?>
<?php the_excerpt(); ?></a>
    </li>
  </ul>
</nav>

/* リストの不要なCSS記述をキャンセル */
nav.inline-block-test ul {
  padding-left: 0;
}
nav.inline-block-test li {
  display: block;
}


/* 装飾 */
nav.inline-block-test li {
  border-top: 1px solid blue;
  border-bottom: 1px solid blue;
  padding: 10px;
  
  /* display: flex;で横並びをしたい場合、この要素に使用してください。 */
}
nav.inline-block-test li > *:not(:last-child) {
  margin-right: 10px;
}
nav.inline-block-test li a {
  text-decoration: none;
}