我該如何糾正這一點，使其看起來更好？

Question

我試圖創建一個可以訪問的菜單單擊時可以訪問的項目列表，但即時通訊與CSS有問題。我設法刪除了子彈點，但它留下了邊界和div邊緣之間的巨大差距。我想知道是否有一種集中在div中的表格的簡單方法，可以像文本對齊或類似工作。我更喜歡需要自動觸摸的東西，而不是僅僅猜測像素的寬度。

這是我創建至今的CSS：

.submenudiv{ 
    display:inline-block; 
    /*height:170px; 
    width:120px;*/ 
    background-color: grey; 
    /*border: 2px black solid;*/ 
    margin: auto; 
    /*margin-top: 50px;*/ 
    padding: 5px; 

    text-align: center; 
} 
.submenudiv: hover{ 
    background-color:blue; 
} 
.list{ 
    list-style-type: none; 
    /*margin-left: -40px; 
    margin-top:3px;*/ 
    border: 2px solid black; 
    padding: 5px; 
    text-align: left; 

} 
.list:hover{ 
    background-color:blue; 
    color:white; 
} 

的JS代碼是這樣的：

var list = function() { 
    var creatDiv = document.createElement("div"); 
    creatDiv.id = "submenudiv"; 
    creatDiv.className = "submenudiv"; 

    var creatul = document.createElement("ul"); 
    for(index = 0; index < 5; ++index){ 
     li = document.createElement("li"); 
     li.className = "list"; 
     li.innerHTML = "Submenu" + index; 
     creatul.appendChild(li); 
    } 

    creatDiv.appendChild(creatul); 
    document.body.appendChild(creatDiv); 
}; 



creatbtndiv.onclick = function() { 
    var alert = confirm("yes master"); 
    list(); 
}; 

只需點擊「點擊我」，確認命令繼續和應該出現一個表格。

欣賞幫助。

Answer 1

刪除差距

ul { 
    margin:0; 
    padding:0; 
} 

中心表

.divContainer{ 
    text-align:center; 
} 
table { 
    margin:0 auto; 
}