首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

为span标签添加样式解决方案

2012-04-12 
为span标签添加样式htmlheadstyle.has_children{width:250pxcolor:white}.has_children a{float:l

为span标签添加样式
<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}
[解决办法]

探讨
.has_children span{background:red;width:250px;display:inline-block}

热点排行