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

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

WBOY
Release: 2016-06-21 09:14:12
Original
2154 people have browsed it

<!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>
Copy after login

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


回复讨论(解决方案)

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;}
Copy after login

就好了


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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template