width:1190pxの間でテキストを横並びの中央揃えにしたいです。

Question

css

　.foot-list li{
    clear: both;
    padding: 0 20px;
    
    
}

.foot-list {
	border-top: solid 2px #DDDDDD;
	width: 1190px;
	margin: 0 auto;
	display: flex;
}

.foot-list a:link {
	color: gray;
}

.foot-list a:visited {
	color:  gray;
}

.foot-list a:hover {
	color: gray;
	text-decoration: underline;
	text-decoration-color: #333333;
}

HTML

<ul class="foot-list">
        <li><a href="#hoge">top</a></li>
        <li><a href="#hoge">work list</a></li>
        <li><a href="#hoge">character</a></li>
        <li><a href="#hoge">goods</a></li>
        <li><a href="#hoge">disney plus</a></li>
  </ul>

前のコードでfloat: right;を使用したので今回clearプロパティを使用しています。
テキストの上にはborderがあります。

Comments

[m.ts10806]

現状のコードにおける問題点、起きている現象は何でしょうか。

[rara0210]

現状画像のようになってしまいます。

[m.ts10806]

提示されたコードは一部では？
冒頭に全角スペースが入っているのも気になりますが、提示されたコードだけでは画像のようにはなりません。

[m.ts10806]

編集確認しました。
結局、冒頭の全角スペースは入ってるんですか？

[m.ts10806]

あとこのままだとlistの頭の・が入ったままですが、提示された画像にはついていません。
提示されたCSS以外にもCSSフレームワーク等使ってるのでしょうか？

[rara0210]

おそらく.foot-list liのpadding:0 20px;が原因です。消してみたところ全角スペースは入らず、左寄せになりました。

[m.ts10806]

ひとまず、実際のコードに入ってないのなら消しておいてもらいたいのですが。。。
[　].foot-list li{

[rara0210]

li {
list-style: none;}と最初に記載してあるため、・はつかないようになってます

[m.ts10806]

>li {
list-style: none;}と最初に記載してあるため

追記修正依頼としては「コードは全て提示してください」です。
同じ状態にならないと的確なアドバイスとなりません。
省略している部分が影響して要件通りにならないことなんてざらにあります。

Answer 1

flexだと位置はjustify-contentで調整するものと思います。
center指定するとそれっぽくなりそうです。ご確認を。

Comments

[rara0210]

中央に配置されました！
display: flex;以外のflex boxを知らなかったので今後勉強していきたいと思います。

[m.ts10806]

全角スペースの件、修正しておいてください。
コードが正しく提示されてないので私も試さず、半ばエスパーに近い回答をしています。