善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是怎么让DIV中li不换行实现导航横向拉动

傅汉松

默认情况下,我们在一个DIV里写了大量的LI标签之后,如果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: 980px;
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>


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 怎么让DIV中li不换行实现导航横向拉动
默认情况下,我们在一个DIV里写了大量的LI标签之后,如果LI标签的宽度超过了DIV的宽度,就会自动换一行显示。但在制作手机网站时,由于导航菜单界面较小,如果导...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    76.79ms