<html>
<head>
<style>
.has_children{width:250px;color:white;}
.has_children a{float:left;width:250px;background:#6C3;}
.has_children span{background:red;width:250px;}
</style>
<title></title>
</head>
<body>
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<body>
</html>
请问各位朋友,为什么我为span元素添加的背景样式显示的宽度不是250px呢?而只是span标签中的字的背后区域才显示背景颜色呢?希望各位给予帮助,不胜感激!先谢谢了!
------解决方案--------------------
span是内联元素,高宽度是由其内容来决定的
.has_children span{background:red;width:250px;}
改成这样
.has_children span{display:block;background:red;width:250px;}
------解决方案--------------------
div占用的位置是一行,span占用的是内容有多宽就占用多宽的空间距离
------解决方案--------------------
.has_children span{background:red;width:250px;display:inline-block}
------解决方案--------------------