css - 如何使只有一行列表比屏幕宽？

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

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

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