代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟课程导航</title>
<style>
div {
overflow:hidden;
}
ul {
list-style: none;
margin: 0px;
border: 1px;
padding: 0px;
}
li {
background-image: url("image/submenu.gif");
background-repeat: no-repeat;
margin: 0px;
border: 1px;
padding: 0px;
}
h2 {
font-size: 14px;
margin: 0px;
border: 1px;
padding: 0px;
background-color: #f5f9fc;
}
</style>
</head>
<body>
<div>
<h2><img src="image/title_icon.gif" alt="">课程导航</h2>
<ul>
<li>ACCP 软件工程师</li>
<li>BTEST 软件测试工程师</li>
<li>BENET 网络工程师</li>
<li>JBNS 网站工程师</li>
<li>ACCP 启蒙星</li>
<li>ANDROID 软件工程师</li>
<li>JAVA 软件工程师</li>
<li>.NET 软件工程师</li>
<li>网络营销</li>
</ul>
</div>
</body>
</html>
效果如图:
这个位置标题颜色延伸到后面去了,这个应该如何把它消除掉呢?
<h2> 默认生成块级盒,占满一行。
给它或外面的 <div> 设一个宽度或最大宽度。