css如何设置列表的,横排,或者竖排?

html-css0110

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>

一、使用writing-mode属性

语法:writing-mode:lr-tb或writing-mode:tb-rl

参数:

1、lr-tb:从左向右,从上往下

2、tb-rl:从上往下,从右向左

运行代码发现,IE显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。

 二、模拟文字竖排

代码:

ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}

ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}

此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-wordword-break:nomal”这句实现标点自动换行(连续字符自动换行)。

我觉得你应该先保存,然后在浏览器中看一下效果。我帮你度过了是正常的,

能影响它是竖的,主要是.daohang{ width:280pxheight:12pxmargin:0 autofloat:left} 中的"width:",280PX在字体大小 font-size:12px的情况下足够显示的了。如果你测试的不行也有可能你的页面有其它因素影响,你可以适当调大的宽度。