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

How to display with proper aligment in this case

本文关键字:对齐 显示 何正确 这种情况下      更新时间:2023-09-26

http://jsfiddle.net/cod7ceho/94/

我有两个数量的一个项目,说"意大利披萨"。

每个数量都有一些Topping和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);

请告诉我怎么解决这个问题??

在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