float 有关问题
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
float 问题
这里为什么要用float:left;不是有display:inline; 了吗?应该都在一行上了?
<div id= "nav ">
<ul>
<li> <a href= "../../../default.htm "> Home </a> </li>
<li> <a href= "../../../about/default.htm "> About </a> </li>
<li class= "sel "> <a href= "../../default.htm "> Archive </a> </li>
<li> <a href= "../../../lab/default.htm " title= "Coding examples and translated articles "> Lab </a> </li>
<li> <a href= "../../../reviews/default.htm " title= "Book reviews and music recommendations "> Reviews </a> </li>
<li> <a href= "../../../contact/default.htm "> Contact </a> </li>
</ul>
</div>
/*
=Navigation
*/
#nav {
clear:both;
padding-top:3px;
}
#nav ul {
float:left;
width:100%;
margin:0;
padding:0;
list-style:none;
background:#d41e00 url(../i/nav-tab.gif) repeat-x;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#nav a {
display:block;
float:left; /* ??*/
width:auto;
margin:0;
padding:0 16px;
border-right:1px solid #bb1600;
border-bottom:none;
border-left:1px solid #fe633a;
color:#fff;
background:#d41e00 url(../i/nav-tab.gif) repeat-x;
font:bold 1.1em/2.5 "Century Gothic ", "Trebuchet MS ",Helvetica,Arial,Geneva,sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}
------解决方案--------------------
inline只是说让它呈行显示.但是你却用在了 <li> 这个标签上.我们都知道, <li> 这个标签是自上而下的,例如:
.option1
.option2
.option3
我们可以理解为每项对应第一项基点有一个横,纵坐标(只是理解哈)而display:inline是让它们水平方向呈直线显示.但它没有管纵坐标.所以会出现这种情况:
.option1
.option2
.option3
一般来说我们都直接在li里用float:left就行了.
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
CSS3的3D转换效果详解介绍
CSS3的3D转换效果详解介绍:
本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只...
-
HTML学习10:表单格式化
表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表੬...
-
CSS布局参考 IE的If条件注释使用备忘
内容提要:在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用! 关键字:Div CSS IE Hack...
-
CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同...
-
控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两...
-
compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能...
-
求前端大神帮我看下我这网站,到底是什么原因。除了ie7和火狐其他浏览器都没问题。
http://120.25.1.133/digger/index.php/Home/In...
-
各位是怎样解决屏幕的分辨率的问题的呢?
我的笔记本是15.6英寸的,我开发的网页在我的电脑上看起来比较好,但是我想换一个大的屏幕的...
-
css-----强大的效果
1 <div id="d1">你好 2 <span>aaaaaaaaa</span> 3 <div> 4 <span id="s1">bbbbbbbb</span> 5 ...
-
新手关于canvas的问题
html代码:<canvasid="canvas"></canvas>
js代码:
第一种:varcanvas=$("#canvas");
第二种:varcanvas=$("#canva...