檬味博客 » 问答 » css如何设置列表的，横排，或者竖排？

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

CCS如何设置列表的横排或者竖排 请看案例：让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。下面是简单的代码实现,仅供参考： {margin:0px; padding:0px;} li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30...
css如何设置列表的，横排，或者竖排？
浮动 然后设置宽度2014-03-26
　　CCS如何设置列表的横排或者竖排
　　请看案例：
　　让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。
　　下面是简单的代码实现,仅供参考：
　　<style>
* {margin:0px; padding:0px;}
li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; position:relative;}

.box>li {float:left; position:relative;}
.son {position:absolute; top:30px; left:-1px; width:306px;}
.son>li {float:left;} /*浮动后，二级菜单就在一行了*/
.grason {position:absolute; top:-1px; left:100px;}
.son,.grason {display:none;}
.active {display:block; background:#FF0;}
</style>
<script>
window.onload=function(){
var aLi = document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++)
{
/*给一级菜单加鼠标移入，移出事件，让二级菜单显示，隐藏*/
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>2015-12-21
mengvlog 阅读 9 次 更新于 2025-07-21 11:53:02 我来答关注问题0
2 个回答檬味博客专题活动
  • 深空见闻 我是新手,想在css中实现无序列表的横排。谢了!

    此外，你也可以将CSS直接嵌入到HTML的title标签下，这样也能达到同样的效果。例如：这两种方法都可以实现无序列表的横排显示。横排显示的效果主要是通过CSS中的float:left属性实现的。同时，我们通过设置每个列表项的宽度和高度，以及行高，来确保每个列表项能够整齐地排列在一起。值得注意的是，为了确保列表...

  • 誉祥祥知识 怎样让两个div横向并排??、

    1. 使用CSS的display属性：一种常见的方法是使用CSS的`display`属性来设置div的布局方式。你可以将div的`display`属性设置为`inline-block`或者`inline`，这样就可以使div元素横向排列。例如：css .div1, .div2 { display: inline-block; /* 或者使用inline */ } 这样设置后，两个div就会在同一行...

  • 瑞物评测室 CSS技巧分享:如何用css制作横排二级下拉菜单

    定义页面使用的css样式，也是需要在head里定义的。 style type="text/css" * { margin:0; padding:0; } .jiao ul li a:hover{ color:#red; } ul, li { list-style:none; } a { text-decoration:none; } .jiao { border:5px solid #pink; border-right:none; overflow:hi...

  • anonymous css+div导航下拉二级菜单竖排效果如何改为横排?

    * {margin:0px; padding:0px;}li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; position:relative;}.box>li {float:left; position:relative;}.son {position:absolute; top:30px; left:-1px; width:306px...

  • YC教计算机 css如何让div横向排列

    可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部