Question

我有两个数量的项目，比如＆＃34;意大利比萨饼＆＃34;。

每个数量都有一些Toppings和Crustings，它们以单个对象的格式存在。

我试图以项目方式展示浇头和面包皮。

我可以显示列表，但如何以正确的对齐方式显示这些列表。

目前，这些项目已移至右侧。

这是我的代码

var item_name = 'italian pizza';
var quantity = '2';
var toppingsjson = {

    "Qty1": {
        "values": ["T1qty1", "T2qty1"],
        "name": "Qty1"
    },


    "Qty4": {
        "values": ["T1qty1", "T2qty1"],
        "name": "Qty4"
    }

};
var crutsjson = {

    "Qty3": {
        "values": ["cqty1", "cqty1"],
        "name": "Qty3"
    }    

};

var headerstyle = '';
var divhtmltoppcrust = '';
for (var l = 0; l < 4; l++) {
    var toppingsul = '<ul>';
    var crustsul = '<ul>';
    for (var qty in toppingsjson) {
        var number = qty.match(/\d+/g);
        var s = l+1;
        if(number==s)
        {
            if (number.length) {
                number = number[0];
                toppingsul += "<li>" + toppingsjson[qty].values + "</li>";   
            }
        }
    }   


    for (var qty in crutsjson) {
        var number = qty.match(/\d+/g);
        var s = l+1;
        if(number==s)
        {   
            if (number.length) {
                number = number[0];
                crustsul += "<li>" + crutsjson[qty].values.join(",") + "</li>";
            }
        }
    }
    var item = l + 1;

    toppingstyle = (toppingsul!='<ul>') ? "block":"none";
    cruststyle = (crustsul!='<ul>') ? "block":"none";


     if(toppingsul=='<ul>'&&crustsul=='<ul>')
    {
        headerstyle = 'none';
    }
    else
    {
        headerstyle = 'block';
    }

    divhtmltoppcrust+='<h5 style="display:'+headerstyle+'" >Item '+item+'</h5><h6 style="display:'+toppingstyle+'">Toppings</h6> '+toppingsul+' <h6 style="display:'+cruststyle+'">Crusts</h6>'+crustsul+'';

}
var TreeMenu_Contentdiv = $('<div class="TreeMenu_Content" id="leafcontenttree"></div>');
var html = '<div class="lastItm_Wrap orders_margin_padding_none">\
                                <div class="prd_title"><h3>' + item_name + '</h3></div>\n\
                            <div class="Itm_left_aside">\n\
                                <div class="Itm_dtsl">\n\
                                    <div class="Qty_Wrap">\n\
                                        <p><b>Qty -' + quantity + '</b></p>\n\
                                    </div>\n\
                                 <div class="addonsList"><b></b>  ' + divhtmltoppcrust + ' </div>\n\
                                </div>\n\
                            </div>\n\
                        </div>';
TreeMenu_Contentdiv.html(html);
$(".MyOrdersdisplay").append(TreeMenu_Contentdiv);

请让我知道如何解决这个问题？

Answer 1

在WebKit浏览器（Chrome，Safari和Opera）中，存在无序列表的基本样式。在这个基本样式中有一个选项：-webkit-padding-start: 40px。将其更改为-webkit-padding-start: 0px，您的问题就会得到解决。

http://jsfiddle.net/cod7ceho/97/

<强> CSS

ul {
      list-style-type: none;
      -webkit-padding-start: 0;
}

<强>更新：

如果您在Mozilla Firefox中遇到同样的问题，则此padding-start将为-moz-padding-start。资料来源：https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start

在这种情况下如何正确对齐显示

1 个答案: