獲取一個選框開始重複儘快空間可用

Question

Here是我到目前爲止的一支筆。我一直在使用CSS3然而我打開使用其他方法是否會更好地工作：

.userAttributes > .attributeGroup > .favoriteArtistsAttr { 
    max-width: 74%; 
    animation: marquee 10s linear infinite; 
} 

@keyframes marquee { 
    0% { text-indent: 0; } 
    100% { text-indent: -100%; } 
} 

我希望字幕開始重演的時刻，作爲p年底已經滑進幀。我也需要marque停下來並且可以滾動（這部分已經工作了）。

我發現this實現了我想達到的目標。我注意到他們正在通過複製內容來做到這一點，但是我一直無法讓這個工作正常。我也想知道這是否是實現我的目標的最佳方式，也許最好是使用javascript或jquery插件？我想，以確保它的工作原理，並期待同所有的瀏覽器（在合理範圍內）

Answer 1

我和你「流派」標題更新了原來掛例如小提琴： http://codepen.io/anon/pen/oxEPeZ

我已經注意到是你提供的標記是有點不對，所以在原來這是發生了什麼：

標題欄應該在它自己的獨立div。我已將您的標題版本設置爲浮動到選取框div的左側。

然後，選取框div必須足夠寬以包含所有文本 - 我將它設置爲500px，以便項目在達到容器的最大寬度時不會開始堆疊。

之後，您需要確保您有兩個跨度與您的內容。在您正在處理的鏈接中，每個項目列表只有一個段落標籤。 這就是它不重複的主要原因。

所以，現在，我們只是流派部分標記看起來是這樣的：

<div class="title"> 
    Genres: 
</div> 

<div class="marquee"> 
    <div> 
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span> 
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span> 
    </div> 
</div> 

我已經把字幕和標題爲div容器，並複製它爲最喜愛的藝術家......（這可以任意命名，但我在這裏完成的是使用margin-bottom在每個項目下創建空間，而不是<br>標籤）。 因爲我們的第二個股票代碼有更多的內容，我已經添加了另一個名爲'拉伸'的類來給選框增加更多的寬度。

我知道我沒有直接編輯你的小提琴抱歉，但希望這可以幫助你擺脫困境。