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

Question

我有一个列表，长度是可变的，它可以有4个项目或30个项目。

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

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

<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();
    }
});
}

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

Answer 1

尝试从float: left删除li，并将white-space: nowrap添加到'ul'。

我在这里尝试过：http://jsfiddle.net/76d6p/