檬味博客 » 问答 » 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 阅读 38 次 更新于 2025-09-10 12:34:08 我来答关注问题0
2 个回答檬味博客专题活动
  • 瑞物评测室 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...

  • 文暄生活科普 ulli设置横排,并除去li前的圆点_html/css_WEB-ITnose

    CMS在线预览 jQuery图片列表鼠标经过遮罩显示文字 原文 关键的浮动步骤使菜单横向排列，给li元素添加"float:left;"属性以使每个li浮动在前一个li的左侧，并设置margin-left:10px以确保li之间间隔10像素。CSS定义为：.hvtulli li{float:left;margin-left:10px}。结果如下：菜单变横向了。完成基本布局后...

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

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

  • 猪八戒网 怎样在网站上添加横向菜单?

    3、在标签内添加文字。在新建的添加要显示的内容。如图：4、创建样式标签 在标签后新建一个标签。5、创建横向导航的样式 在标签里添加一个样式类为：.navli{}，然后再.navli类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为none，字体颜色为白色。样式代码为：navl...

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

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

其他CSS类似问题

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

CSS相关话题

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