行内元素的间距问题

来源：5-1 课程总结

weixin_慕码人7523200

2020-12-08 22:24:50

# 具体遇到的问题
1.老师你好，我在代码第一个li中，a元素在代码中没有换行，所以元素之间没有间距，这是我想要的效果，但是第二个li当我的a元素在代码中换行的时候，它们之间就产生了间距（图1），我的a元素变得非常多的时候，我不可能在代码中把他们都放在同一行中，这样一行代码会变得非常长且代码结构会非常混乱，那么有什么方法可以消除他们之间的间距呢

2.在图2中，我查看京东首页，他们写的代码都是换行的，但是实际效果却没有产生间距，他们是怎么实现的呢？
# 报错信息的截图

图1：

图2：

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素的间距</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .classify {
            width: 1190px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
        }

        li {
            margin-top: 20px;
        }

        a {
            text-decoration: none;
        }

        .classify {
            height: 480px;
            padding-top: 10px;
        }

        .classify .col1 {
            width: 190px;
            height: 100%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <section class="classify">
        
        <div class="col1">
            <ul>

                <li>
                    <a href="">家具</a>/<a href="">家居</a>
                </li>
                <li>
                    <a href="">家具</a>/
                    <a href="">家居</a>/
                    <a href="">家装</a>/
                    <a href="">厨具</a>
                </li>
            </ul>
        </div>
    </section>
</body>

</html>