liタグでスペースを消せるようにしたい

前提・実現したいこと

jQueryでクラスを抽出しソートするページを作ろうとしています。
まずこちらのページのJSとCSS、HTMLをそのまま使用して実装しようとしました。

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

jQueryの動作に問題はないものの、こちらのページのCODEPENに表示されるようなliになりませんでした。
どうしてもGreenやREDの前に空白が生まれてしまいます。見栄えが悪いため、なんとか改善したいです。

該当のソースコード

HTML
1<div class="wrapper">
2  <p class="message">↓のボタンをクリックしてください↓</p>
3      <ul class="sortNav">
4            <li class="btnGreen">Green</li>
5            <li class="btnRed">Red</li>
6            <li class="btnBlue">Blue</li>
7            <li class="btnAll">All</li>
8      </ul>
9  <div class="container">
10    <div class="green">sample</div>
11    <div class="blue">sample</div>
12    <div class="red">sample</div>
13    <div class="green">sample</div>
14    <div class="blue">sample</div>
15    <div class="red">sample</div>
16    <div class="green">sample</div>
17    <div class="blue">sample</div>
18    <div class="red">sample</div>
19    <div class="green">sample</div>
20    <div class="blue">sample</div>
21    <div class="red">sample</div>
22    <div class="green">sample</div>
23    <div class="blue">sample</div>
24    <div class="red">sample</div>
25  </div>
26</div>

CSS
1.wrapper {
2    width:600px;
3    margin: 30px auto;
4}
5.message {
6  margin-bottom: 10px;
7}
8.sortNav {
9  overflow: hidden;
10  margin-bottom: 30px;
11}
12.sortNav li {
13    list-style:none;
14    float: left;
15    margin-left: 10px;
16    color: #fff;
17    font-weight: bold;
18    padding: 5px 10px;
19    cursor: pointer;
20    border-radius: 15px;
21}
22.green,.blue,.red {
23    width: 50px;
24    height: 50px;
25  line-height: 50px;
26  verticel-align: middle;
27  text-align: center;
28    margin: 10px;
29  font-size: 10px;
30    color: #fff;
31    float: left;
32}
33.green, .btnGreen {
34    background-color: #238C00;
35}
36.blue, .btnBlue {
37    background-color: #00f;
38}
39.red, .btnRed {
40    background-color: #f00;
41}
42.btnAll {
43  background-color: #999;
44}

JS
1$(function(){
2    $('.sortNav li').each(function(){
3        $(this).click(function(){
4            var btnName = $(this).attr("class").substring(3).toLowerCase();
5            var className = '.';
6            className += btnName;
7      if(btnName == 'all') {
8        $('.container > div').fadeIn(200);
9      } else {
10        $('.container div:not(className)').hide();
11        $(className).fadeIn(200);
12      }
13        });
14    });
15});

【追記】現在の状況

このようなliの前に本来あったであろう【・】と思われる部分のスペースが消えません。

よろしくお願いします。

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

回答1件

ベストアンサー

質問の意図にあっているかは不安なのですが、

    .sortNav {
        overflow: hidden;
        margin-bottom: 30px;
        padding:0px;
    }

とするといかがですか

追記：
以下だといかがでしょうか

<div class="wrapper">
    <p class="message">↓のボタンをクリックしてください↓</p>
    <div class="sortNav">
        <div class="btnGreen">Green</div>
        <div class="btnRed">Red</div>
        <div class="btnBlue">Blue</div>
        <div class="btnAll">All</div>
    </div>
    <div class="container">
        <div class="green">sample</div>
        <div class="blue">sample</div>
        <div class="red">sample</div>
        <div class="green">sample</div>
        <div class="blue">sample</div>
        <div class="red">sample</div>
        <div class="green">sample</div>
        <div class="blue">sample</div>
        <div class="red">sample</div>
        <div class="green">sample</div>
        <div class="blue">sample</div>
        <div class="red">sample</div>
        <div class="green">sample</div>
        <div class="blue">sample</div>
        <div class="red">sample</div>
    </div>
</div>

<style>
    .wrapper {
        width:600px;
        margin: 30px auto;
    }
    .message {
        margin-bottom: 10px;
    }
    .sortNav {
        overflow: hidden;
        margin-bottom: 30px;
    }
    .sortNav div {
        list-style:none;
        float: left;
        margin-left: 10px;
        color: #fff;
        font-weight: bold;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 15px;
    }
    .green,.blue,.red {
        width: 50px;
        height: 50px;
        line-height: 50px;
        verticel-align: middle;
        text-align: center;
        margin: 10px;
        font-size: 10px;
        color: #fff;
        float: left;
    }
    .green, .btnGreen {
        background-color: #238C00;

    }
    .blue, .btnBlue {
        background-color: #00f;
    }
    .red, .btnRed {
        background-color: #f00;
    }
    .btnAll {
        background-color: #999;
    }
</style>
<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script>
    $(function(){
        $('.sortNav div').each(function(){
            $(this).click(function(){
                var btnName = $(this).attr("class").substring(3).toLowerCase();
                var className = '.';
                className += btnName;
                if(btnName == 'all') {
                    $('.container > div').fadeIn(200);
                } else {
                    $('.container div:not(className)').hide();
                    $(className).fadeIn(200);
                }
            });
        });
    });
</script>

投稿2019/10/02 13:34

編集2019/10/02 15:27