Rumah > hujung hadapan web > html tutorial > 为什么我的实际效果达不到想要的效果啊!主要是li标签的浮动效果影响的,在样式里用了clear属性还是解决不了。_html/css_WEB-ITnose

为什么我的实际效果达不到想要的效果啊!主要是li标签的浮动效果影响的,在样式里用了clear属性还是解决不了。_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-21 09:14:12
asal
2201 orang telah melayarinya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html ; charset=utf-8"/><style>body{font-family:"Helvetica","Arial",sans-serif;color:#333;background-color:#ccc;margin:1em 10%;height:550px;width:1024px;}h1{color:#333;background-color:transparent;}a{color:#c60;background-color:transparent;font-weight:bold;text-decoration:none;}ul{float:left;padding:0;}li{float:left;padding:1em;list-style:none;clear:right;}img{clear:both;}</style>  <title> Image Gallery </title> </head>  <body>  <h1>Snapshots</h1>  <ul>		<li>		<a href="images/1.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>		</li>		<li>		<a href="images/2.jpg" onclick="showPic(this); return false;" title=" A cup of black coffee"> Coffee</a>		</li>		<li>		<a href="images/3.jpg" onclick="showPic(this); return false;"  title="A red ,red rose ">Rose</a>		</li>		<li>		<a href="images/4.jpg" onclick="showPic(this); return false;" title=" The famous clock"> Big Ben</a>		</li>	</ul>		<img src="/static/imghw/default1.png"  data-src="images/5.jpg"  class="lazy"   alt="my image ga	llery" id="placeholder"></img>		<p  id="description">Choose an image.</p> </body></html>
Salin selepas log masuk

想达到的效果:
而实际的效果 :


回复讨论(解决方案)

Big Ben



my image ga    llery

Choose an image.



可不可以讲一下原理啊?为什么我在ul或者li标签的样式里加"clear:right";就不行啊

首先去掉ul的float:left
然后li元素是浮动元素,而浮动元素是不在文档流中,所以这个ul是没有高度

加上:

ul自适应高度ul{     zoom:/*IE*/}ul:after{     content:' ';     display:block;     clear:both;     height:0;}
Salin selepas log masuk

就好了


1. 首先说浮动
浮动元素默认情况下是没有宽度的,得靠内容撑出来宽度或手动给它加个宽度,
你把

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan