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

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

WBOY
發布: 2016-06-21 09:14:12
原創
2154 人瀏覽過

<!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>
登入後複製

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


回复讨论(解决方案)

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;}
登入後複製

就好了


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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板