listを横並びにした時、widthが等間隔になるのを変えたい

Question

前提・実現したいこと

下記の画像のように、リスト内の文字数が異なるため、左のほうが隙間があり、右が窮屈になっています。
この幅をここで指定して整えたいです。

該当のソースコード

<ul class="main-menu">
          <li class="li1"><a href="#">人気記事</a></li>
          <li class="li2"><a href="#">新着記事</a></li>
          <li class="li3"><a href="#">今のおすすめ</a></li>
          <li class="li4"><a href="#">最新レビュー</a></li>
        </ul>

ul.main-menu li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border-left:1px solid white;
    font-size: 1.2vw;
    width: 10px !important;

}

li.li1 {
  box-sizing: border-box;
  padding-right: 0;
  padding-left: 0;
}

ul.main-menu li:first-child {
    border:none;
}
ul.main-menu li a {
    display:block;
    text-decoration:none;
    color:white;
}

試したこと

・ul.main-menu li でwidthを!importantで指定しましたが、効きませんでした。
・liにクラスをそれぞれ振って、marginをマイナスにしましたが、効きませんでした。

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

Foundation6を使用しています。

Answer 1

文字と線の間隔が場所によって異なることを気にされているのでしたら、
liにwidthの指定はしない方が良いでしょう。
また、marginは線の外側の領域の指定なので、
paddingで指定しましょう。
その際、box-sizing: border-box;にしておくと調整しやすいです。

Comments

[naoki_m]

ご回答ありがとうございます！
ご助言の通り、widthを外し、<li>にbox-sizing: border-box;を追加して、paddingの指定を行いましたが、検証の結果、左右のpaddingは元から0のままでして、要素の中に、文字の左右にへんな隙間があるようです。

[dice142]

へんな隙間とはpaddingで指定したものではないのですか？
現在のCSSはどうなってますか？

[naoki_m]

paddingを0や-4pxなどで指定しても、その隙間は一向に変化しませんでした。
2枚目の画像をアップしたのでご覧いただければと思いますが、上下のpaddingはありますが、左右は消えているように見えます。
ですが文字の左右に一文字分ほどの余白が存在します。

cssも更新しましたので、li.li1 の部分をご覧いただければと思います。

[dice142]

CSSを拝見しましたが、widthを外したとあるのに残っています。
また、私は「文字と線の間を広げたい」のかと思ってましたが、なくしたいのでしょうか？
それであれば既にpaddingは元々0なので不要ですね。

提示していただいたHTMLとCSSで試してますが、そこまで幅が広くなりません。
というより10px指定なのでそんなに広がりません。

もしかして別ファイルを指定したり、他にCSSがあったりなどしませんか？

Answer 2

Flexboxを使用してはいかがでしょうか。

ul.main-menu {
	padding: 0;
	display: flex;
}

ul.main-menu li {
	border-left: 1px solid #fff;
	font-size: 15px;
	list-style: none;
}
ul.main-menu li:first-child { border-left: none;}

ul.main-menu li a {
	display: block;
	padding: 0 20px;
	text-decoration: none;
	color: #fff;
}

文字横の空白は「ul.main-menu li a」に指定しているpaddingを編集すれば調整可能です。

Flexboxは「justify-content」等を駆使すればレスポンシブにも対応できるので、仕組みを理解すればかなり使えると思いますよ。
参考までに
https://webdesignday.jp/inspiration/pickup/4175/
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

Answer 3

リストが4つということで有れば、
リストの横幅を25%にてテキストを中央寄せにするのは如何でしょうか？？？

簡単に最小限のスタイルで作成してみました。
質問者様の考えたとおりになっているかわかりませんが、ご確認ください。

動くサンプル