Wordpressの<?php bloginfo( 'name' ); ?>で取得したサイト名にwidthを合わせる方法を教えてください

Question

wordpressで独自テンプレートを作成しています。
header内の<ul>リストの<li>に

<?php bloginfo( 'name' ); ?>

でサイト名を取得したのですが、

<li>のWidthをテキストに合わせることができません。 どうすれば良いでしょうか？ <li>に対してCSSの最下部でdisplay:inline-blockを指定し、 !importantをつけて優先度をあげていますが、 合わせることはできませんでした。

該当部分のコードは以下の通りです。

<header>
<ul class="logo-area-menu">
<li class="logo-area-menu  textwidth">
　<p class="site-name"><a class="＊＊" href="<?php echo home_url(); ?>/">
   <?php bloginfo( 'name' ); ?>
  </a></p>
</li>
<li class="logo-area-menu">
記事一覧
</li>
<li class="logo-area-menu">
カテゴリ名
</li>
<li class="logo-area-menu">
カテゴリ名
</li>
</ul>
</header>

.logo-area-menu{
　padding-left:1.5em;
　display:table-cell;
}

試したこと：
CSSに、

.textwidth{display:inline-block !important;}

を追加。（実装できず）

完成イメージ⬇︎

Comments

[kei344]

bloginfo( 'name' )で出力される物はただの文字列では。「<li>のWidthをテキストに合わせる」についてはHTML/CSSが不明なので、有効な回答を得られないと思います。書かれている状況が再現するコード（HTML/CSS）か、再現するURLを質問文に追記されたほうが回答を得やすいと思います。

[tongari_maru]

ありがとうございます。該当部分のコードを加筆いたしました。

[kei344]

「Widthをテキストに合わせる」が出来ていない状況が提示された物だけで再現するのでしょうか。提示された物だけの実働サンプル⇒ https://jsfiddle.net/duyxLmab/
また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[tongari_maru]

ありがとうございます。
コードブロックの方は囲ませていただきました。

また、「Widthをテキストに合わせる」ができていない状態に関して、
現状ローカルで作業をしながら上記以上のコードを書いていない状態のため、
こちらに記述する方法がわかりません。

なお、完成イメージとしてはサイトタイトル部分については https://relaxlab.jp/ のような形をイメージしています。

[kei344]

「完成イメージ」のどの部分が「Widthをテキストに合わせる」にあたりますか？

[tongari_maru]

質問内容に追加させていただいた画像のまるで囲った部分になります。

Answer 1

こういう事でしょうか。

.logo-area-menu a {
    display: block;
}
```**動くサンプル：**[https://jsfiddle.net/39shu46m/](https://jsfiddle.net/39shu46m/)

Comments

[tongari_maru]

実装できました！
ありがとうございます！