怎么让DIV中li不换行实现导航横向拉动
默认情况下，我们在一个DIV里写了大量的LI标签之后，如果LI标签的宽度超过了DIV的宽度，就会自动换一行显示。但在制作手机网站时，由于导航菜单界面较小，如果导航菜单LI很多的情况下就会有多个换行。这时，好的解决方法就是让导航菜单横向拉动。
实现DIV里LI标签不换行，需要通过CSS3进行控制。主要有以下二个位置。
第一个位置是控制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>
