无序列表的问题

青松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>
<div class="header w">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="nav">
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">课程</a></li>
<li><a href="javascript:;">职业规化</a></li>
</ul>
</div>
<div class="search">
<input type="text" value="输入关键词">
<button>按纽</button>
</div>
<div class="user">
<img src="images/user.jpg" alt=""> lilei-hanmm
</div>
</div>
<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>
<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>
<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>
<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>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="images/logo.png" alt="">
<a href="#" class="app">下载APP</a>
</div>
</div>
</div>
<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

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

无序列表的问题

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

评分

浏览过的版块