dreamwear制作下拉菜单

最新推荐文章于 2021-09-13 15:34:54 发布

原创最新推荐文章于 2021-09-13 15:34:54 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

82 篇文章

订阅专栏

本文介绍如何使用CSS对无序列表进行布局调整，包括去除列表项的小圆点、设置列表项水平排列、调整列表项宽度及背景颜色等，通过具体实例展示了实现这些效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考https://www.douban.com/note/434018895/?from=tag制作

制作无序列表

制作多个列表项

输入一个列表项的值后按enter键就可以创建下一个列表项

去除掉列表项前的小圆点

设置li元素的list-style-type: none;

设置列表项水平排列

列表项的float设为left

ul要设置margin和padding

如果不设置ul的margin和padding，得出来的结果是这样的

因为ul的默认padding为: padding:0 0 0 40px;所以列表的左外边距为40px

设置margin: 0px; padding: 0px;后，得出的结果为

设置列表项（li元素）的宽度，使他们的宽度之和等于div的宽度

设置text-align等于center

设置line-height等于列表项的高度。

现在可以去除掉列表项的背景颜色，设置li:hover的颜色

鼠标悬停的效果如下：

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div01 {
	margin: auto;
	height: 50px;
	width: 600px;
	background-color: #C63;
}
.div01 ul li {
	height: 50px;
	width: 150px;
	float: left;
	text-align: center;
	list-style-type: none;
	line-height: 50px;
}
.div01 ul {
	margin: 0px;
	padding: 0px;
}
.div01 ul li:hover {
	background-color: #3F9;
}
</style>
</head>

<body>
<div class="div01">
  <ul>
    <li>百度</li>
    <li>经验</li>
    <li>实验</li>
    <li>火影</li>
  </ul>
</div>
</body>
</html>