Html 均匀对齐水平列表（且响应迅速）

我知道有几种方法可以证明水平列表的合理性。但与我的屏幕设计不同： 你可以在屏幕设计的上方和下方看到我的结果。有没有办法改善物品之间的间距，使它们更均匀？（第二项和第三项为长）

这是我的代码：

.navi {
    text-align: center;
    display: table;
    width: 100%;
    ul {
        display:table-row;
    }
    li {
        display:table-cell;
        a {
            display: block;
            border: 1px solid #000;
        }
    }
}

尽管如此，为了支持浏览器，您仍然可以使用CSS表来实现所需的结果：

.navi{
文本对齐：居中；
显示：表格；
宽度：100%；
}
.navi ul{显示：表行；}
.navi li{显示：表格单元格；宽度：20%；}
.navi li a{display:block；border:1px solid#000；}

我喜欢使用table、table row和table cell方法。在我的例子中，我有两个链接需要水平对齐，但我希望它们之间有一些空间。我在链接之间添加了一个空项来创建一个间隔。然后添加css，只对奇数单元格进行样式设置

<div class="aff">
<ul class="buttons">
<li><a href="http://www.link1.com">Link1</a></li>
<li>&nbsp;</li>
<li><a href="http://www.link2.com">Link 2</a></li>
</ul>
</div>

.aff {display:table; text-align:center; width:100%; box-sizing:border-box;}
.aff ul.buttons {display:table-row;list-style-type:none; margin:0; padding:0;}
.aff ul.buttons li:nth-child(odd) {display:table-cell; width:47%; background:#acacac; padding:10px; border-radius:.44em}
.aff ul.buttons li a {display:block; line-height:45px; font-size:1.2em; text-decoration:none; font-weight:bold;}
.aff ul.buttons li a:hover {text-decoration:underline;}

.aff{显示：表格；文本对齐：中心；宽度：100%；框大小：边框框；}
.aff ul.buttons{显示：表格行；列表样式类型：无；边距：0；填充：0；}
.aff ul.buttons li:n子（奇数）{显示：表格单元格；宽度：47%；背景：#acacac；填充：10px；边框半径：.44em}
.aff ul.buttons li a{显示：块；行高：45px；字体大小：1.2em；文本装饰：无；字体重量：粗体；}
.aff ul.buttons li a:悬停{文本装饰：下划线；}

看起来图像中的项目只有固定的填充。尝试：

li{padding:10px 40px；}

（根据需要调整

40px

）