How to make only one line list wider than screen? - css

Question

I have a list, which length is variable,it could have 4 items or 30 items.
The issue is that this list is being rendered as a marquee, through a Javascript that is working, but items reach the screen width and then they pass to next line.
I want to have all the items on the same line, so then I could move the list to recreate the marquee effect.
<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;
}
And with 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();
}
});
}
I hope you understand what I am trying to do! Thanks!

Answer 1

Try removing the float: left from the li, and adding white-space: nowrap to the 'ul'.
I tried that here: http://jsfiddle.net/76d6p/