如何使用css，布局横向导航栏

html-css068

如何使用css，布局横向导航栏,第1张

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul>和 <li>元素非常有意义：

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充：

ul {

list-style-type: none margin: 0 padding: 0}