零基础学做网站培训介绍

当前位置:

怎么让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: 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>

发表评论

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

相关教程

  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • CSS如何调整DIV顶部边距 图文教程 (116021 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 大家都知道Linux主机实现301重定向相对较简单,如果你使用的是Linux主机,那么在设置固定连接的时候,wordpress后台会自动添加以下函数到.htaccess文
  • Wordpress 幻灯片插件-Slider Revolutionr介绍Slider Revolutionr是一个具有视差功能的幻灯片插件,此插件是wordpress上目前为至特别强大的幻灯片插
  • HTML换行标签:<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或
  • 在做网站时当把文字加上这个滚动属性marquee后就自动换到下一行了,要怎么解决不要文字换行呢?如果去掉marquee属性就不会换行,加上后就会自动换行
  • HTML换行标签(br标签) 视频教程 (183468 次浏览)
    HTML  Br换行元素标签介绍我们自己建网站时,网页上的成段的文字不可能一行显示,这就需要进行文字换行。文字的换行我们就使用HTML Br换行元素标签
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 我们在浏览一些大型商城网站时,经常会看到一些特别漂亮的二级导航菜单。它的二级导航菜单并不是常见的网站导航的二级下拉菜单,而是图片展示列表,并
  • 默认情况下,我们在一个DIV里写了大量的LI标签之后,如果LI标签的宽度超过了DIV的宽度,就会自动换一行显示。但在制作手机网站时,由于导航菜单界面较