>웹 프론트엔드 >HTML 튜토리얼 >为span标签添加样式_html/css_WEB-ITnose

为span标签添加样式_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:09:422082검색







    

第1章-认识jQuery
1.1-JavaScript和JavaScript库
1.2-加入jQuery
1.3-编写简单jQuery代码
1.4-jQuery对象和DOM对象
1.5-解决jQuery和其它库的冲突
1.6-jQuery开发工具和插件
1.7-小结
    




请问各位朋友,为什么我为span元素添加的背景样式显示的宽度不是250px呢?而只是span标签中的字的背后区域才显示背景颜色呢?希望各位给予帮助,不胜感激!先谢谢了!


回复讨论(解决方案)

span不是块级元素,设置width无效

span是内联元素,高宽度是由其内容来决定的


.has_children span{background:red;width:250px;}
改成这样
.has_children span{display:block;background:red;width:250px;}

div占用的位置是一行,span占用的是内容有多宽就占用多宽的空间距离

该说的都说了。

2楼正解 display:block 加上这个

2楼正解

display:block 加上这个

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

楼上正解

.has_children span{background:red;width:250px;display:inline-block}
IE下块元素如何实现display:inline-block的效果?
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}


谢谢各位的解答!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.