无序列表的问题

青松100 · 发表于 2020-12-21 07:03:34

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由青松100 于 2020-12-21 14:44 编辑

求教，为啥我在练习某个视频教程的学成在线时，在写无序列表中，下面的无序列格是这样的：

这些代码也是写在body的里面

    <dl>
        <dt>城市</dt>
        <dd>beijing</dd>
        <dd>shanghai</dd>
    </dl>

可是在浏览器变成如下：

我的具体问题是：　正常无序列表不是：dd 要在dt 的下面缩进一点吗？　如下面的截图。但是为啥这个beijing, shanghai在城市的下面，并没有缩进？　我在CSS中也没有添加样式之类的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        ...
        <dt>名词2</dt>
        <dd>名词2解释1</dd>
        <dd>名词2解释2</dd>
        ...
    </dl>
</body>

</html>

情绪z · 发表于 2020-12-21 14:10:49

可能是平台的问题，我这里是可以的

青松100 · 发表于 2020-12-21 14:27:03

情绪z 发表于 2020-12-21 14:10
可能是平台的问题，我这里是可以的

我另外起一个文件，也可以。

但是不知为啥，在另一个文件中不行。我上传到百度盘，有空时能帮我看看吗？

如果您没空，那有别的大神帮助也可以。

青松100 · 发表于 2020-12-21 14:33:54

链接: https://pan.baidu.com/s/1spOtUOLAxeoTtC-oy4Ao9Q 提取码: w7tg

下面的代码在206-209之间，dd没有缩进，为什么呢？

我把完整的HTML，CSS都上传到百度盘了。求求各位大大帮助

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- header starts -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <!-- nav -->
        <div class="nav">
            <ul>
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">课程</a></li>
                <li><a href="javascript:;">职业规化</a></li>
            </ul>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button>按纽</button>
        </div>
        <!-- user -->
        <div class="user">
            <img src="images/user.jpg" alt=""> lilei-hanmm
        </div>

    </div>
    <!-- header ends -->
    <!-- banner starts -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="javascript:;">前端开发<span>></span></a></li>
                    <li><a href="javascript:;">后端开发<span>></span></a></li>
                    <li><a href="javascript:;">移动开发<span>></span></a></li>
                    <li><a href="javascript:;">人工智能<span>></span></a></li>
                    <li><a href="javascript:;">商业预测<span>></span></a></li>
                    <li><a href="javascript:;">云计算&大数据<span>></span></a></li>
                    <li><a href="javascript:;">运维&从测试<span>></span></a></li>
                    <li><a href="javascript:;">UI设计<span>></span></a></li>
                    <li><a href="javascript:;">产品 <span>></span></a></li>
                </ul><span></span>
            </div>
            <div class="course">
                <div class="course-hd">我的课程表</div>
                <div class="course-bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>

                    </ul>
                    <a href="#" class="all">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner ends -->
    <!-- goods start -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <div class="goods-item">
            | <a href="#">JQuery</a> | <a href="#">Spark</a> | <a href="#">mySQL</a> | <a href="#">JavaWeb</a> | <a href="#">mySQL</a> | <a href="#">JavaWeb</a>
        </div>
        <div class="mod">修改兴趣</div>
    </div>
    <!-- goods end -->
    <!-- box starts -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>


            </ul>
        </div>
    </div>
    <!-- box ends -->


    <!-- box starts -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练 </h4>
                    <p> <span>高级</span> • 1125人在学习</p>
                </li>



            </ul>
        </div>
    </div>
    <!-- box ends -->
    <!-- footer starts -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br/> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>
            </div>
        </div>
    </div>
    <!-- footer ends -->

    <dl>
        <dt>城市</dt>
        <dd>beijing</dd>
        <dd>shanghai</dd>
    </dl>



</body>

</html>

青松100 · 发表于 2020-12-21 14:43:40

我已经搞明白了。

原来是通配符的原因、

谢谢情绪大神的回答。

不需要再解决了

青松100 · 发表于 2020-12-21 14:44:18

情绪z 发表于 2020-12-21 14:10
可能是平台的问题，我这里是可以的

我已经搞清楚了。

不需要再帮助了。非常感谢您的回复

li努力再努力 · 发表于 2021-5-24 11:19:47

账号		自动登录	找回密码
密码			立即注册

无序列表的问题

马上注册，结交更多好友，享用更多功能^_^

评分