Question

我有一个list-style-none的列表，需要能够通过Ajax向自己添加新项目，并在背景中适当扩展。通过Ajax添加很容易，但我为后台尝试的每个解决方案都让我失望。我不知道它是否可能;是吗？我正在使用像这样的网格：

http://jqueryui.com/demos/sortable/#display-grid

当我将鼠标悬停在封闭的div和/或封闭的ul标签上时，WebKit和Firebug都向我展示了瘦小的空条。看来你用list-style-none和float设置列表松散的那一刻，你放弃了对它的背景的控制。但这不可能是正确的。

Answer 1

这是我经常遇到过的事情。问题是浮动元素不是普通盒子模型的一部分，因此它们不会导致它们的父元素扩展，除非它们的父元素也是浮动的。因此，如果可能的话，浮动ul或包含div。

编辑：有关其他仅限css的解决方法，请参阅quirksmode。

Answer 2

您能提供代码示例吗？此外，为什么列表显示：none set？

例如，应该像这样简单：

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>'));     
    });
}

应该就是这么简单。您最初不需要隐藏列表，因为您可以简单地追加列表项并适当地更新显示。

希望有所帮助。

Answer 3

您需要明确设置区域的宽度和高度。

查看此水平滚动链接：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}

注意：您需要设置高度;否则你不会看到背景，因为李是浮动的。

Answer 4

对于处理float元素，也许你应该知道它的特征，陷阱以及如何处理它。看下面的链接，它也有演示，所以你可以理解这个概念：

甚至可以用ajax扩展（水平）列表的背景？

4 个答案: