水平滚动条为ul [英] horizontal scrollbar for ul

问题描述

美好的一天！

由于某种原因，我不能防止UL和它的李包装。
我想让UL的宽度在一行（不包装）的LI的宽度，如果UL变得比nav-div（800px）更宽，我想在导航中的滚动条，所以我可以滚动我尝试了几乎任何显示，空白，宽度和高度，但我只能得到它的工作，如果我给UL一定的宽度。然而，这不是一个选项，因为页面是生成的，并且可以包含1-20 LI的。

有人知道如何使滚动条出来，而不设置UL的宽度？

HTML：

 < div id = nav> 
< ul id =navbuttons> 
< li>一些文字< / li> 
< li>一些文字< / li> 
 ... 
< / ul> 
< / div> 
  

CSS：

 code> div＃nav 
 {
 height：100px; 
 width：800px; 
 margin-left：auto; 
 margin-right：auto; 
} 
 
 div＃nav ul li 
 {
 margin-right：15px; 
 float：left; 
 font-size：12px; 
 list-style-type：none; 
} 
  

解决方案

  ul {
 white-space：nowrap 
} 
 
 li {
 display：inline; 
} 
  

Good day!

For some reason, I can't prevent the UL and it's LI's from wrapping. I want the UL's width to be exactly the width of the LI's on one line (without wrapping) and if the UL becomes wider than the nav-div (800px), I want a scrollbar within the nav so I can scroll the LI.

I tried pretty much anything with display, whitespace, width's and height, but I can only get it to work if I give the UL a certain width. This, however, is not an options, since the page is generated and can contain 1-20 LI's.

Does anyone know how to make a scrollbar come up without setting the UL's width?

HTML:

<div id="nav">
     <ul id="navbuttons">
          <li>Some text</li>
          <li>Some text</li>
          ...
     </ul>
</div>

CSS:

div#nav
{
    height: 100px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

div#nav ul li
{
    margin-right: 15px;
    float: left;
    font-size: 12px;
    list-style-type: none;
}

解决方案

try this

ul {
   white-space:nowrap;
}

li {
   display:inline;
}

这篇关于水平滚动条为ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！