Heim > Web-Frontend > HTML-Tutorial > span中背景图去掉float属性就不显示?_html/css_WEB-ITnose

span中背景图去掉float属性就不显示?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:13:21
Original
1113 Leute haben es durchsucht

初学css,遇到个奇怪的问题,把float去掉后就看不到背景图,firebug上也找不到span元素了,这是什么原因呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>文本框中的事件应用</title>    <style type="text/css">            .spnInit{width:179px;height:40px;line-height:40px;float:right;background: url('Images/pic_Email_ok.gif') no-repeat;}    </style></head><body>           <span id="spnTip" class="spnInit"></span></body></html>
Nach dem Login kopieren


回复讨论(解决方案)

补充下,假如不用float属性,该怎样显示出来背景图呢?

这样不行?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>文本框中的事件应用</title>    <style type="text/css">            .spnInit{width:179px;height:40px;line-height:40px;background: url('Images/pic_Email_ok.gif') no-repeat;}    </style></head><body>           <span id="spnTip" class="spnInit"><pre class="brush:php;toolbar:false">dfasdfasdssssssssssssssssssssssssssssdfasdfsdfasdfasdfasdfas
Nach dem Login kopieren

span是行元素,里面没有内容的时候就没有高度和宽度,所以就消失不见了。
将span设置display:block,即使没有内容,设置的高度和宽度也会起作用。

span是行元素,里面没有内容的时候就没有高度和宽度,所以就消失不见了。
将span设置display:block,即使没有内容,设置的高度和宽度也会起作用。
正解

可是为什么float这个属性也对span的无内容显示与否造成了影响呢?这点真的感到很疑惑啊

。。我知道。。你可以设置他的display:属性inline-block;

加了float以后,就会变为块状元素了

就一个的话,直接放body把,
可以这样去调一下你背景的位置:background-position:-50px -30px ;/*-50px表示横向往左缩进50px,-30px表示纵向往上缩进30px.

调下位置就好了,背景可以不用浮动的。

浮动设置以后、你那个span会自动变成块元素的
而你又设置了span的宽跟高、
所以背景图能看到

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage