为什么我的实际效果达不到想要的效果啊!主要是li标签的浮动效果影响的,在样式里用了clear属性还是解决不了。
<!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>
想达到的效果:

而实际的效果:

...全文
相关推荐
UL里的LI元素左浮动层一行显示时使其居中的方法
在制作页面是,li浮动是很常用的,一般情况也不用其居中,但有时,其特殊原因需要居中,这是就有点犯难了,下面使用相对定位的原理来解决下
模板驱动型文档自动化系统:从内容到专业PDF的确定性生产
模板驱动型文档自动化是一种基于预设规则与结构化模型的智能出版范式,其核心在于将内容、排版逻辑与品牌规范解耦并固化为可复用的视觉DNA。它依托网格系统、语义化色彩、层级化排版和元数据映射等底层原理,实现内容输入→结构解析→规则渲染→多端交付的全链路确定性输出。相比传统所见即所得工具,该技术显著降低非设计师的排版认知负荷,提升市场、咨询、教育等高频文档场景下的交付效率与一致性。Sqribble正是这一范式的典型实践,代表了文档生产力从‘人工调优’向‘规则治理’的关键演进。
关于li:hover的怎么清除浮动问题实现代码
当鼠标移动上去时,周围显示一个方框,但是后面的会向后移动,如何才能使得当鼠标移上去时后面的li不浮动
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
div ul li 嵌套的使用在网页布局中很常见,最主要的问题就是如何解决增加多个li后DIV高度自动适应问题,本文有个不错的示例,可以解决此问题,大家可以尝试运行下
css的border和clear属性使用方法和示例
主要介绍了css的border和clear属性使用方法和示例,需要的朋友可以参考下


