Question

我有这个div元素

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <li>
            here
        </li>  
    </ul>
</div>

结果是： enter image description here

但是当我从jquery添加li个元素时，结果会变为： enter image description here

为什么填充到左边以及如何解决它？

jquery的

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '<ul>';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            lis+="</ul>";
            foodDive.html(lis);    
        });
    });
});

CSS

.foodsSection{
    width: 50%;
    margin-left: 100px;
    margin-top: 20px;
    border: black solid 2px;
}
.foodsSection label{
    width: 100px;
    color: blue;
}
.foodsSection ul{
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-left: 100px;
    padding: 0;
}
.foodsSection ul li{
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.foodsSection ul li:hover{
    background-color: #ccccff;
}

Answer 1

您正在使用另一个foodsSection ul设置ul的HTML。 e.g。

您正在选择$(".foodsSection ul")元素ul。然后使用另一个ul。

在其中设置HTML

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <ul>
         .
         .
         .
         </ul>
     </ul>
 </div>

这将导致填充量增加一倍，并且 HTML标记不正确。在一个浏览器中可能看起来不对（由于双填充），但由于HTML损坏，其他浏览器看起来会更糟糕。

您可以做的是将.html(lis)代码行替换为.replaceWith(lis)您可以在此处阅读此方法.replaceWith()

Answer 2

那是因为您要将另一个ul元素附加到当前ul。您可以替换ul或仅添加li元素。

foodDive.replaceWith(lis);

Answer 3

因为你要将代码添加到ul元素，它包含一个nexted ul。 Firefox开发人员工具栏有一个＆＃34;视图生成源＆＃34;对此有用的按钮。

试试这个：

$(document).ready(function(){
    $("..RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+2){
                lis +="<li>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            foodDive.html(lis);    
        });
    });
});

Answer 4

您正在从脚本中添加额外的<ul>。您已使用var foodDive = $(".foodsSection ul");获取li的目的地。因此，您不需要第二个var lis = '<ul>';并关闭lis+='</ul>'。只需var lis = '';代替。

Answer 5

您要在标记中添加第二个ul，并继承ul的css样式（剩余边距为100px）。

而不是

.foodsSection ul

试

.foodsSection > ul

css li padding本身

jquery的

CSS

5 个答案: