aタグとtext-alignの併用ができないため代わりとなる方法が知りたいです。

サイトのページの一番上に
単語間が均等離れているメニューバ－を作りたいのですが
aタグとtext-alignの併用ができないため代わりとなる方法が知りたいです。
html

<div class="header-list"> <ul> <a href="#">Mac</a> <a href="#">iPad</a> <a href="#">iPhone</a> <a href="#">Watch</a> <a href="#">TV</a> <a href="#">Music</a> <a href="#">サポート</a> </ul> </div>

css
.header-list p a {
float:left;
color:white;
text-align:center;
}

Appleの公式サイト
「https://www.apple.com/jp/?afid=p238%7ChAvYO2nc-dc_mtid_18707vxu38484&cid=aos-jp-kwyh-brand-slid--」
を真似てサイト作りの練習をしています。

ネットで調べた情報「http://www.htmq.com/htmlkihon/005.shtml」では、
ブロック要素の中にインライン要素を置くことができるとあったので試したのですが状況は変わりませんでした。

m.ts10806

2020/07/07 13:44

「いるようにする」というのは意味が分かりません。具体的にどんなコードを書いて何が起きているのか、どういう結果を望んでいるのか、明記してください。

kageyama_tobio

2020/07/07 13:59

サイトのページの一番上に単語間が均等離れているメニューバ－を作りたいのですが aタグとtext-alignの併用ができないため代わりとなる方法が知りたいです。 html <div class="header-list"> <ul> <a href="#">Mac</a> <a href="#">iPad</a> <a href="#">iPhone</a> <a href="#">Watch</a> <a href="#">TV</a> <a href="#">Music</a> <a href="#">サポート</a> </ul> </div> css .header-list p a { float:left; color:white; text-align:center; }

m.ts10806

2020/07/07 14:01

質問は編集できますので、適宜調整してください。とりあえず、padding使ってみては。

kageyama_tobio

2020/07/07 14:04

わかりました。やってみます

Daregada

2020/07/07 14:20

ええと、ul の内容に直接 p を書いている時点でまずいことやってます。 p要素をすべてli要素にしましょう。

kageyama_tobio

2020/07/07 14:35

修正できました。ありがとうございました。

m.ts10806

2020/07/07 21:07

コードはマークダウンのcode機能を利用してご提示ください

行動規範の内容に同意します

回答1件

ベストアンサー

display: flex;とjustify-content: space-between;でこんな感じにすればいいのかな。
ああ、提示のHTMLのpをすべてliにしていることが前提です。

CSS
1.header-list ul {
2  display: flex;
3  justify-content: space-between;
4  padding-left: 0;
5  margin: 0 auto;
6  max-width: 980px;
7}
8
9.header-list li {
10  list-style: none;
11  text-align: center;
12  padding: 0.5em 2em;
13  border: green solid 1px; /* 確認用 */
14}