list-style-none を使用したリストがあります。これは、Ajax を介してそれ自体に新しいアイテムを追加し、そのときに背景を適切に拡張できるようにする必要があります。Ajax 経由で追加するのは簡単ですが、バックグラウンドで試したすべてのソリューションが失敗します。それが可能かどうかはわかりません。それは...ですか？私はこのようなグリッドを使用しています:
http://jqueryui.com/demos/sortable/#display-grid
囲んでいる div や囲んでいる ul タグにカーソルを合わせると、WebKit と Firebug の両方が細い空のバーを表示します。list-style-none と float:where を使用してリストを自由に設定した瞬間に、その背景に対する制御を放棄しているように見えます。しかし、それは正しくありません。
これは私が何度も遭遇したものです。問題は、フロート要素が通常のボックス モデルの一部ではないため、親要素もフロートしない限り、親要素が展開されないことです。したがって、可能であれば、ul またはそれを含む div をフロートします。
編集:別の css のみの回避策については、 quirksmodeを参照してください。
コードのサンプルを提供していただけますか? また、リストに display:none が設定されているのはなぜですか?
たとえば、次のように単純にする必要があります。
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
それだけ単純なはずです。リスト項目を追加するだけで表示を適切に更新できるため、最初はリストを非表示にする必要はありません。
それが役立つことを願っています。
領域の幅と高さを明示的に設定する必要があります。
水平スクロールについては、次のリンクを確認してください: http://valums.com/scroll-menu-jquery/
スクリプトは次のとおりです。
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
基本的に、新しいアイテムを追加するときにulWidthandを更新する必要があります。divWidth
次に、背景画像を水平方向に繰り返すように設定するだけで、設定が完了します。
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
注: 高さを設定する必要があります。そうしないと、li が浮かんでいるため、背景が表示されません。
float 要素を扱うには、その特徴、落とし穴、およびその処理方法を知っておく必要があるかもしれません。以下のリンクを参照してください。デモもあるので、概念を理解できます。