当前位置: 代码迷 >> HTML/CSS >> 为span标签添加样式解决方案
  详细解决方案

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

热度:52   发布时间:2012-04-12 15:46:35.0
为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}
  相关解决方案