用css的浮动属性,float:left
比如代码如下:
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
在css里面控制
li{float:left}
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
不定义div的宽度,以及父div的宽度即可。来做一个导航:
<style typr="text/css">
*{margin:0padding:0border:0}
.navbg{background:redheight:50px}
.nav{width:980pxheight:50pxmargin:0 auto}
li{float:leftmargin:10pxline-height:30px}
</style>
<div class="navbg">
<div class="nav">
<ul>
<li>首页</li>
<li>联系我们</li>
<li>留言</li>
</ul>
</div>
</div>
放在<body>里试一下便知
如果<style>里再加一句 body{width:980pxmargin:0 auto}则不能铺满屏幕,只有980px。
1、将li的height和line-height设置成为和设计稿一样的2、将列表图标整体切出来,铺在ul上,不平铺
3、使用background-position控制ul背景和li中的文字对齐即可。