我有一个 list-style-none 列表，它需要能够通过 Ajax 向自身添加新项目，并在它这样做时适当地扩展背景。通过 Ajax 添加很容易，但是我为后台尝试的每个解决方案都失败了。我不知道这是否可能；是吗？我正在使用这样的网格：
http://jqueryui.com/demos/sortable/#display-grid
当我将鼠标悬停在封闭的 div 和/或封闭的 ul 标签上时，WebKit 和 Firebug 都向我展示了细长的空条。似乎在您使用 list-style-none 和 float:wherever 设置列表松散的那一刻，您就放弃了对其背景的控制。但这不可能。
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit: See quirksmode for another css-only workaround.
您需要明确设置该区域的宽度和高度。
查看此链接以了解水平滚动：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);
});
});
基本上，您需要在添加新项目时更新ulWidth和。divWidth
然后只需将背景图像设置为水平重复，您就应该设置好。
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
注意：您需要设置高度；否则你将看不到背景，因为 li 是浮动的。
你能提供你的代码示例吗？另外，为什么列表有 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>'));
});
}
应该就是这么简单。您最初不需要隐藏列表，因为您可以简单地附加列表项并适当地更新显示。
希望有帮助。
对于浮动元素的处理，也许你应该知道它的特点、陷阱以及如何处理它。请看下面的链接，它也有演示，所以你可以理解这个概念：