footerのliの間隔がくずれる

前提・実現したいこと

▼該当URL
http://codecamp25148.lesson7.codecamp.jp//html/cookcamp.html#

▼対象キャプチャ

赤枠の間隔が合わないため、同じ間隔にしたいです。
何か解決できる方法がありましたら回答お待ちしております。

該当のソースコード

HTML
1<footer>
2            <div class="footer_contents">
3                <div class="footer_item">
4                <ul class="footer_ul">
5                    <li class="footer_li"><a href="#" class="footer_link">サイトマップ</a></li>
6                    <li class="footer_li"><a href="#" class="footer_link">プライバシーポリシー</a></li>
7                    <li class="footer_li"><a href="#" class="footer_link">お問い合わせ</a></li>
8                    <li class="footer_li"><a href="#" class="footer_link">ご利用ガイド</a></li>
9                </ul>
10                </div>
11                <div class="copy">
12                <small>Copyright&copy;CodeCamp All Rights Reserved.</small>
13                </div>
14            </div>    
15        </footer>
16

CSS
1footer{
2    clear: both;
3    background-color: white;
4    border-top: solid 1px #cccccc;
5    width: 100%;
6    height: 100%;
7    padding: 20px;
8}
9.footer_ul {
10    list-style-type: none;
11    width: 600px;
12    display: flex;
13    padding: 0;
14    margin: 0 auto;
15}
16.footer_li {
17    font-size: 12px;
18    float: left;
19    width: 30%;
20    text-align: center;
21
22}
23.footer_li +.footer_li {
24    border-left: solid 1px #D0D0D0;
25}
26small {
27    color: #A4A5A5;
28}
29.copy {
30    clear: both;
31    text-align: center;
32}
33.footer_link {
34    text-decoration: none;
35    color: black;
36    display: block;
37    width: 100%;
38}

試したこと

paddingやmarginを値を変更してみましたが、良くわかりませんでした。

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

回答2件

取り急ぎ、cssの以下を修正すれば、間隔は統一できます。

①.footer_ulの「padding: 0;」を削除。
②.footer_liの「width: 25%;」を削除。
③.footer_liに「padding: 0 20px;」を追加。（20pxは間隔の幅で任意の値に変更）

ただ、floatとflexが混在していたり、他にもCSS見直して綺麗にした方が良さそうです。。

※flexを使うのであれば、以下で画面中央揃えに出来ます。（ブラウザのサポート状況は調べれてませんが）
①.footer_ulに「justify-content: center;」を追加。
②.footer_liの「width: 25%;」を削除。
③.footer_liに「padding: 0 20px;」を追加。（20pxは間隔の幅で任意の値に変更）

投稿2019/01/26 17:05

編集2019/01/26 17:16

aikon_marimo

総合スコア1083

Suzumi41

2019/01/27 03:08

ご回答ありがとうございます！まだCSSを書き始めて間もないため、書き方が汚いですよね。。。 floatとflexの違いがなかなか難しく、大体そこで苦戦してしまいます。＞①.footer_ulの「padding: 0;」を削除。 ②.footer_liの「width: 25%;」を削除。 ③.footer_liに「padding: 0 20px;」を追加。（20pxは間隔の幅で任意の値に変更） ⇒こちらで解決しました！有難うございました。。！

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

ベストアンサー

###flexを使う場合

.footer_li {
font-size: 12px;
float: left;
width: 25%;
text-align: center;
}

CSSのここ↑の記述からwidth: 25%;を除去し、flex-grow: 1;を追加してください。

CSS
1.footer_li {
2    font-size: 12px;
3    float: left;
4    text-align: center;
5    flex-grow: 1;
6}

これで問題は修正されます。
flexを理解していればさほど難しいことではありません。

###flexを使わない場合

.footer_li {
font-size: 12px;
float: left;
width: 25%;
text-align: center;
}

CSSのここ↑の記述からwidth: 25%;を除去し、padding-left、padding-rightを追加してください。

CSS
1.footer_li {
2    font-size: 12px;
3    float: left;
4    padding-left: 1em;
5    padding-right: 1em;
6    text-align: center;
7}

これで間隔自体は修正されます。

今度はメニューを中央寄せにします。

上の記述からfloat: left;を除去し、display: inline-block;を追加してください。

CSS
1.footer_li {
2    font-size: 12px;
3    padding-left: 1em;
4    padding-right: 1em;
5    text-align: center;
6    display: inline-block;
7}

その後親要素のスタイルを変更します。

.footer_ul {
list-style-type: none;
width: 600px;
display: flex;
padding: 0;
margin: 0 auto;
}

CSSのここ↑の記述からdisplay: flex;を除去し、text-align: center;を追加してください。

CSS
1.footer_ul {
2    list-style-type: none;
3    width: 600px;
4    padding: 0;
5    margin: 0 auto;
6    text-align: center;
7}

両端は揃えるには.footer_liのpaddingを調整してください。
これでも問題解決になるかと思います。

どっちがいいのか

flexは理解するまでが大変ですが、理解できるとかなり重宝するでしょう。
ブラウザの対応状況も気になるかもしれませんが、個人的には積極的にflexを使っていいと思います。
今回奇しくも敵となってしまったflexですが、今日の敵は明日の友です。
頑張ってflexを理解することをおすすめします。

投稿2019/01/26 17:58

yamanaka-aiz

総合スコア51

Suzumi41

2019/01/27 03:13 編集

とてもご丁寧にご回答頂き、ありがとうございます！どちらの方法も試してみた所、どちらも均等に間隔が揃いました。 flew-grow: 1;　で一発で解決なのでとても便利ですね！ flexを調べてみましたが色々種類があるのですね。 flexを使えるようになるともっとコーディングの幅が広がるような気がしますのでこれを機に勉強したいと思います。本当に助かりました・・・！ flexの比較も交えて回答して頂いたため、こちらの投稿をベストアンサーとさせて頂きます。有難うございました！

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

あなたの回答