我怎样才能纠正它，使它看起来更好

How can I correct this to make it look better?

本文关键字：看起来 更好      更新时间：2023-09-26

我试图创建一个项目列表，可以访问时点击菜单，但我有麻烦的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();
};

只要点击"点击我"，确认命令继续，就会出现一个表格。

感谢您的帮助

remove gap

ul {
    margin:0;
    padding:0;
}

中心表

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

相关文章：