关于#HTML#的问题，如何解决？

在设置border-bottom样式
按理来说只有三条线
现在却多出来一条

<div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dl>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>  
                    </dl>
                    <dl>
                        <dt>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>  
                    </dl>
                    <dl>
                        <dt>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>  
                    </dl>
                </div>
                <a href="#" class="more">全部课程</a>



.banner .right .content dl{
   padding: 12px 0;
   border-bottom: 2px solid #e5e5e5;

我写的

img

原图

img

img

style里的 dl 改成dd

img

你原代码写了四个dl，css匹配了四个dl，加了四条线

img

因为你给 dl设置了 bottom-border 你最外层 得dl 也加上了 ，下面这个是 给最外层加个 样式覆盖 一下。 或者 最外层dl 改个 标签


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner .right .content dl {
            padding: 12px 0;
            border-bottom: 2px solid #e5e5e5;
        }

        .dlbox {
           border-bottom: none !important;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="right">
            <h2>我的课程表</h2>
            <div class="content">
                <dl class="dlbox">
                    <dl>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习-程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </dl>
            </div>
            <a href="#" class="more">全部课程</a>
        </div>
    </div>
</body>
<script>

</script>

</html>