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

html-css023

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>

先竖排后横排，还要自适应高度有点不太现实。

不设置float属性，元素可以竖排，但是当元素多得超过指定的高度时，就会溢出容器。如果不指定高度，容器则会被撑大。

但如果设置了float属性，元素可以先横后竖这样完美的排下来，不过跟你的先竖后横的标准又不符合。

div+css里只适合横排的自适应，竖排没办法自适应

如何控制css让三个标签横排显示或者三个以上的标签横排，其实都是一样的，下面演示一下，通过控制li标签实现横排显示；

1、打开所需测试的软件，创建一个新的html

2、写入要实现效果的代码：

3、利用css来控制横排展示；

4、展示的效果为：

详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签与右侧外边距离为20px