想请问下 为什么ul标签没有默认的圆点

来源:4-2 侧边栏导航跟随案例

七月的孩子

2018-05-05 15:59:14

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS隐藏列表</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.background{
			background:url(IMG/mooc.png) no-repeat center top;
			width: 100%;
			height: 6632px;
		}
		.list-3 li{
			background-color: orange;
			font-weight: bold;
		}
		li{
			text-align: center;
			width: 150px;
			height: auto;
			border-bottom: 1px dashed #808080;
			background-color: #33ccff;
			font-weight: bold;
			font-family: "黑体";
			padding: 3px 0px;
			margin:5px 0px;
		}
		.title{
			background-color: #474747;
			font-family: "微软雅黑";
			font-weight: bold;
			width: 150px;
			height: auto;
			text-align: center;
			border-bottom:solid 1px #ececec;
			color: white;
			font-weight: bolder;
			margin:5px 0px; 
		}
		.list li{display: none;}
		.list:hover li{display: block;}
		.list-3{display: none;}
		.title-2:hover .list-3{display: block;}
		.bigdiv{
			position: fixed;
			top: 50%;
		}
		.title-2{
			position: relative;
			background-color: white;
		}
		.list-3{
			position: absolute;
			left: 150px;
			top: -5px;
		}
	</style>
</head>
<body>
	<div class="background">
		<div class="bigdiv">
			<div class="list">
				<div class="title">慕课网标题</div>
				<ul>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="list">
				<div class="title">慕课网标题</div>
				<ul>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="list">
				<div class="title">慕课网标题</div>
				<ul>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
					<li class="title-2">
						慕课网IT学习
						<div class="list-3">
							<ul>
								<li>java</li>
								<li>html</li>
								<li>web</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</html>

在给li标签设置list-style-type:disc;也不显示圆点

写回答

3回答

好帮手慕糖

2018-05-14

你好,因为这里li的显示方式是list-item,即:元素会作为列表显示。li默认的display就是 list-item  所以就有小黑点,你把li的display改成了 block 所以小黑点没有了,可参考如下,设置为 list-item 。

http://img.mukewang.com/climg/5af931b0000186af03020140.jpg

祝学习愉快~

1

傲骨115

2018-05-05

你检查一下你的display:none;


1

小白_攻城狮

2018-05-13

我也觉得奇怪

0

0 学习 · 36712 问题

查看课程