如何在這種情況下適當對齊顯示

Question

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

我有兩個數量的項目，比如說「意大利比薩餅」。

每個數量都有一些澆頭和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