我该如何纠正这一点，使其看起来更好？

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; 
}