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

WBOY
Freigeben: 2016-06-21 09:14:12
Original
2129 Leute haben es durchsucht

<!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="images/5.jpg" alt="my image ga	llery" id="placeholder"></img>		<p  id="description">Choose an image.</p> </body></html>
Nach dem Login kopieren

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


回复讨论(解决方案)

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;}
Nach dem Login kopieren

就好了


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

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