css如何设置列表的，横排，或者竖排？

html-css028

css如何设置列表的，横排，或者竖排？,第1张

CCS如何设置列表的横排或者竖排

请看案例：

让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。

下面是简单的代码实现,仅供参考：

<style>

* {margin:0pxpadding:0px}

li {list-style:nonewidth:100pxheight:30pxfont-size:14pxtext-align:leftline-height:30pxborder:1px solid #000position:relative}

.box>li {float:leftposition:relative}

.son {position:absolutetop:30pxleft:-1pxwidth:306px}

.son>li {float:left} /*浮动后，二级菜单就在一行了*/

.grason {position:absolutetop:-1pxleft:100px}

.son,.grason {display:none}

.active {display:blockbackground:#FF0}

</style>

<script>

window.onload=function(){

var aLi = document.getElementsByTagName('li')

for(var i=0i<aLi.lengthi++)

{

/*给一级菜单加鼠标移入，移出事件，让二级菜单显示，隐藏*/

aLi[i].onmouseover = function(){

this.className = 'active'

var oSon = this.getElementsByTagName('ul')[0]

if(oSon)

{

oSon.style.display='block'

}

}

aLi[i].onmouseout = function(){

this.className = ''

var oSon = this.getElementsByTagName('ul')[0]

if(oSon)

{

oSon.style.display='none'

}

}

}

}

</script>

</head>

<body>

<ul class="box">

<li>首页</li>

<li>公司简介

<!--创建的二级菜单-->

<ul class="son">

<li>大事件</li>

<li>领导致辞</li>

<li>企业文化</li>

</ul>

</li>

<li>联系我们</li>

<li>产品显示</li>

</ul>

</body>

简单的话，可以这么做，用JS

function opencat(cat){

if(document.getElementById(cat).style.display=="none"){

document.getElementById(cat).style.display=""

}

else {

document.getElementById(cat).style.display="none"

}

}

然后在要收缩菜单的按钮或链接上这么做 比如超连接

<a id="menu1" href="#" style="display:block" onclick="opencat('list1')">

下面紧跟着的是展开后的目录内容，可以是Table，也可以是DIV

<table id="list1">

<tr><td>111111</td></tr>

<tr><td>222222</td></tr>

<tr><td>33333</td></tr>

<tr><td>4444444</td></tr>

<tr><td>5555555</td></tr>

</table>