Html 具有等距居中文本的水平列表

我试图编码的响应网站的主页有三个文本框水平排列，如所附的图片。文本应均匀分布，并在网站的整个宽度上居中

我一直在尝试使用

ul

和

display:inline

命令。我想这应该很容易，但我已经试了好几个小时了，没办法解决。以下是HTML：

新的！进货
0%财务在线申请
超过英镑的订单可免费送货；五十

您还需要针对

元素。查看这个JSFIDLE：

代码如下：

HTML:

ul#促销员李{
显示：内联；
填充：20px；
}

新的！进货
|
0%财务在线申请
|
超过英镑的订单可免费送货；五十

您可以使用CSS3灵活的方框布局来调整内容：周围的空间。这正是您所需要的，在列表项的两端均匀地用边距隔开

促销员{ 显示器：flex； 证明内容：周围的空间； 列表样式：无； }

新的！进货
0%财务在线申请
超过英镑的订单可免费送货；五十

带flexbox：

促销员{ 显示：flex；/*魔术开始*/ 填充：0； 列表样式：无； } #促销员>李{ 柔性：1；/*宽度相等，覆盖所有容器*/ 文本对齐：居中；/*将内部文本水平居中*/ }

新的！进货
0%财务在线申请
超过英镑的订单可免费送货；五十

我将添加

display:table

，

display:table单元格

示例，因为flexbox已经很好地覆盖了。这是一种过时的技术，但它的优点是兼容到IE8（如果你喜欢的话）：

促销员{ 显示：表格； 表布局：固定；/*强制相等列宽*/ 宽度：100%； 填充：0； 保证金：0； } #推广人李{ 显示：表格单元格； 填充：10px； 垂直对齐：中间对齐； 文本对齐：居中； 左边框：实心1px#000； } #推广人李：第一个孩子{ 左边界：无； }

新的！进货
0%财务在线申请
超过英镑的订单可免费送货；五十

查看

显示：表格

/

显示：表格单元格

布局适用于旧浏览器，flexbox适用于新浏览器。两者都应该达到你想要的结果。非常感谢Jesse。行。