水平滚动！ [英] horizontal scrolling only!

问题描述

我有一个包含HORIZONTAL菜单。菜单由无序列表组成。
当菜单超过< div> 的宽度时，我希望div获取水平滚动条。
i尝试对我的< div> 使用这些CSS定义：

  position：absolute; 
 width：380px; 
 overflow：auto; 
 overflow-y：hidden; 
 height：30px; 
  

但是意识到由于菜单是LIST，不同的列表项会在行到达< div> 的宽度，并移动到下一行，因此浏览器看不到水平滚动条的需要（它不显示垂直滚动条， overflow-y：hidden; 行）

任何想法如何创建一个1行水平菜单

解决方案

据我所知，没有基于CSS的解决方法。然而，你可以使用Jquery来解决它。

我做了一些测试，你可以看到：

http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html

第一个例子有6个左右的li超过了容器div的宽度，这意味着你不需要一个滚动条。

第二个例子有8-9 li，它超过了容器div的宽度，这意味着你需要一个滚动条。

基本上，你使用Jquery使用size（）在你的div里面的li的数量。如果它们超过X数，在我的例子中是6（需要滚动之前的限制），那么一个类被添加到ul以扩展它的宽度（.longer），所以没有换行符并且出现水平滚动条。 p>

它还增加了另一个类（.taller），它增加了滚动条本身的高度。

$ b G.Campos

i have a that contains a HORIZONTAL menu. the menu consists of an unordered list. i would like the div to get a horizontal scroller whenever the menu exceeds the width of the <div>. i tried using these CSS definitions for my <div>:

position: absolute;
width: 380px;   
overflow: auto;
overflow-y: hidden;
height: 30px;

but than realized that since the menu is LIST, the different list items break the line whenever they reach the width of the <div> and move on to the next line, thus the browser doesnt see the need for a horizontal scroller (it doesnt display a vertical one as well because of the overflow-y: hidden; line)

any ideas how i can create a 1 line horizontal menu which will scroll horizontally only?

thank you all so much.

解决方案

As far as I know, there's no CSS-based workaround for this. However, you can use Jquery to solve it.

I made a little test for you to see:

http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html

The first example has 6 or so li's which exceed the width of the container div which means you DON'T need a scrollbar.

The second example has 8-9 li's which DO exceed the width of the container div which means you DO NEED a scrollbar.

Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.

It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.

Cheers G.Campos

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