如何使只有一个行列表比屏幕更宽？

我有一个列表，其长度是可变的，它可以有4个项目或30个项目。如何使只有一个行列表比屏幕更宽？

问题是这个列表通过一个正在工作的Javascript呈现为一个选取框，但是项目达到屏幕宽度，然后它们传递到下一行。

我想将所有项目放在同一行上，然后我可以移动列表以重新创建选取框效果。

What I have and What I want

<div class="submenu-container"> 
<div id="agrupador"> 
<ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;" class="submenu" id="moverlo"> 
     <li> Item </li> 
     <li> Item </li> 
     <li> Item </li> 
     <li> Item </li> 
     <li> Item </li> 
     <li> Item </li> 
    </ul> 
    </div> 
</div> 

    .submenu-container { 
    background:#F0F7FF; 
    border-bottom:1px silver solid; 
    width: 100%; 
    overflow: hidden; 
} 

.submenu li { 
    display: inline-block; 
    margin-left:4px; 
    background:none; 
    *display: inline; /* IE */ 
    float:left; 
} 

.submenu { 
    margin:0; 
    padding-top:8px; 
    padding-bottom:8px; 
    padding-left:0; 
    padding-right:0; 
    clear:none; 
    width:auto; 
    float:left; 
}

使用JavaScript：

function ClonarAvisos(){ 
var width = alertSize(); // Usable window width 
var xVarScreen = width - $('moverlo').getWidth(); 
alert($('moverlo').getWidth()); 
$('moverlo').setStyle({ width: $('moverlo').getWidth() + xVarScreen }); 
$('agrupador').setStyle({ width: $('moverlo').getWidth() * 2 }); 
var clon = Element.clone('moverlo', true); 
clon.id = 'moverlo2'; 
$('agrupador').insert(clon);

}

function MoveNoticias(p) { 
//Función que imita el comportamiento del Tag "marquee" 
new Effect.Move('agrupador', { 
    x: -3, 
    y: 0, 
    mode: 'relative', 
    duration: 0.1, 
    afterFinish: function() { 
     var offSetDistance = $('agrupador').offsetLeft ; 
     offSetDistance = Math.abs(offSetDistance); 
     var gettingWidth = $('moverlo').getWidth() ; 
     if (offSetDistance >= gettingWidth) { 
      Element.setStyle('agrupador', {left: '0px' }); 
     } 
     MoveNoticias(); 
    } 
}); 
}

我希望你明白我想要做的！谢谢！

来源

2012-07-24 Leandro Cusack