CSS 横並びメニューの区切り線の等間隔を変更したい

Question

前提・実現したいこと

横並びメニューの区切り線を、等間隔ではなく、
文字数に合わせて区切りたいです。

例えば下記のソースコードですと、【あ】と【あいうえお】の区切り線のスペースがまとめて
等間隔になってしまっているので、区切り線のスペースを一つ一つ合わせていきたいのですが、
どのようにしたらよいでしょうか。
勉強不足で申し訳ありませんが、どなたかご回答よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<ul>
<li><a href="">あ</a></li>
<li><a href="">あ</a></li>
<li><a href="">あ</a></li>
<li><a href="">あいうえお</a></li>
<li><a href="">あ</a></li>
<li><a href="">あ</a></li>
</ul>　


nav li { /*区切り線*/
float: left;
border-right: #d7d7d7 2px solid;
width: 106px;
text-align: center;		
}

nav li:first-child {
border-left: #d7d7d7 2px solid; }
nav a {
      color: #141414;
      text-decoration: none; 

試したこと

補足情報（FW/ツールのバージョンなど）

この場合、文字数の少ない「あ」の区切りスペースが広くなってしまいます。

Answer 1

nav ul{
  display:flex;
}
nav li{
  display:block;
  padding-left:10px;
  padding-right:10px;
  list-style:none;
}
nav li a{
  text-decoration: none;
}
nav li:not(:first-child)  {
border-left: #d7d7d7 2px solid;
}

Comments

[272]

迅速にご回答いただきありがとうございます！非常に助かりました…！

Answer 2

幅は指定しないようにして、中身の幅に合わせます。

padding で余白をお好みで調整してください。

nav li { /*区切り線*/
  float: left;
  border-right: #d7d7d7 2px solid;
/*  width: 106px; */
  text-align: center;
  padding: 5px 20px; /* 追加 */
  list-style: none;  /* 追加 */
}

---

以下、蛇足ですが、
float: left; での横並びにはもうやめましょう。まわりのレイアウトに副作用がありますので、いろいろ面倒です。
display: inline-block; を使うか、

nav li { /*区切り線*/
  display: inline-block;
  border-right: #d7d7d7 2px solid;
/*  width: 106px; */
  text-align: center;
  padding: 5px 20px;
  list-style: none;
}

FlexBoxレイアウトを使うのがいいでしょう。

nav ul {
  display: flex
}

nav li { /*区切り線*/
  border-right: #d7d7d7 2px solid;
/*  width: 106px; */
  text-align: center;
  padding: 5px 20px;
  list-style: none;
}

FlexBoxレイアウトの方が自由度が高いのよりお勧めです。

Comments

[272]

迅速かつ詳しくアドバイスまでいただき、ありがとうございます！
とても勉強になりました！
ありがとうございます！