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

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/