inline-blockで横並びにできない

Question

ブロック全体をリンクにしたもの５つを横並びにしたいのですが、できません。

まずrails のlink_toを使ってclassをlink1に設定しました。
その後 css　に下記のコードを打ちましたが、inline-blockだけ反映されずに縦並びになってしまいます。
次にliを指定して同じcssを打つとinline-blockが反映されて横並びにはなるんですが、文字だけがリンクになり、ブロック全体がリンクになりません
。それに加え文字の色が反映されていませんでした。
floatは出来れば使いたくないのでinline-blockで試行錯誤しているのですが解決しません。

html

<li><%= link_to "ホーム", "", class: "link1" %></li><li><%= link_to "イベント・行事案内", "", class: "link1" %></li><li><%= link_to "牧師紹介", "", class: "link1" %></li><li><%= link_to "アクセス", "", class: "link1" %></li><li><%= link_to "お問い合わせ", "", class: "link1" %></li>

css

.link1 {
  display: inline-block;
  padding: 10px;
  background-color: green;
  color: white;
  box-sizing: border-box;
  width: 20%;
  text-align: center;
  border: solid 1px black;
}

回答お待ちしています。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

inline-block は <li> に適用させてください。

Comments

[taishiaaaaa]

ありがとうございます解決しました：D

Answer 2

そりゃまliの中身のaがinline-blockになったからってliは横並びにはならんでしょうね
このケースはliをinline-blockにしてaはblockにするのがいいかな

Comments

[taishiaaaaa]

ありがとうございます解決しました：D