1
我有一個列表,其長度是可變的,它可以有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();
}
});
}
我希望你明白我想要做的!謝謝!
我做相同的,但你更快),我的版本上的jsfiddle:[http://jsfiddle.net/zVSCV/](http://jsfiddle.net/ zVSCV /) – r3bel 2012-07-24 13:35:16
它的工作原理,但我有列表(因爲我必須克隆原來的馬戲團效果)被浮動到左邊,所以它保持在同一行。做你的修復,有一個重疊的地方,你不知道嗎?謝謝! – 2012-07-24 15:08:07
我不太明白。你有一個工作的例子(甚至可能是另一個JSFiddle)? – 2012-07-27 00:34:00