2

我有一个列表，它的长度是可变的，它可以有 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();
    }
});
}

我希望你明白我想要做什么！谢谢！

4

1 回答 1

6

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

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

于 2012-07-24T13:33:37.410 回答