当前位置:

怎么让DIV中li不换行实现导航横向拉动

默认情况下,我们在一个DIV里写了大量的LI标签之后,如果LI标签的宽度超过了DIV的宽度,就会自动换一行显示。但在制作手机网站时,由于导航菜单界面较小,如果导航菜单LI很多的情况下就会有多个换行。这时,好的解决方法就是让导航菜单横向拉动。

DIV中li不换行实现导航横向拉动

实现DIV里LI标签不换行,需要通过CSS进行控制。主要有以下二个位置。

第一个位置是控制DIV强制不换行,并且横向拉动。


div
{
overflow:scroll;
white-space: nowrap;
}

第二个位置是将DIV里的LI转换成行内元素,


div li
{
display: inline-block;
display: -moz-inline-stack;
*display: inline;
}

这样就可以让DIV中li不换行实现导航横向拉动了。下面是一个实例代码,分享给大家。


<style type="text/css">
div
{
width: 1380px;
overflow:scroll;
white-space: nowrap;
border: #333 1px solid;
}

div ul li
{
display: inline-block;
display: -moz-inline-stack;
*display: inline;
}
</style>
<div class="layout">
<ul>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
</ul>
</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 老师,我在学习做网站时,notepad++使用过程中,每行代码展示的太长不换行,向右拖动查看不方便,如何操作可以是每行代码在屏幕页面内查看,不用再向
  • 默认情况下,我们在一个DIV里写了大量的LI标签之后,如果LI标签的宽度超过了DIV的宽度,就会自动换一行显示。但在制作手机网站时,由于导航菜单界面较