为span标签添加样式_html/css_WEB-ITnose
Jun 24, 2016 pm 12:09 PM
第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;...}
谢谢各位的解答!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
