如何用CSS制作横向菜单

html-css012

如何用CSS制作横向菜单,第1张

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

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

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

例如

<style>

ul {

padding:0

margin:0

list-style:none

width:600px

height:50px

line-height:50px

text-align:center

}

ul li {

width:100px

height:50px

float:left

}

<style>

<ul>

<li>菜单项目1</li>

<li>菜单项目2</li>

<li>菜单项目3</li>

<li>菜单项目4</li>

<li>菜单项目5</li>

<li>菜单项目6</li>

<ul>

这样吧,用浮动:

ul.menu {

display: inline

float: right

margin: 100px 0 0 0

padding: 0 20px 0 0

*zoom: 1

}

ul.menu:after {

clear: both

content: "."

display: block

height: 0

visibility: hidden

display: none

overflow: hidden

}

ul.menu li {

display: inline

margin: 0

padding: 0

float: left

}

------------------------

有问题可以加{border: 1px solid #f00}调试,看边线位置在哪里

这个办法很管用的