在仅将CSS应用于UL的情况下，将所有UL LI元素排成一行，居中对齐？

Question

您如何使元素中的所有<li>项目<ul>都显示在一行中，以及如何将整个列表放在页面的中央？您必须将CSS直接应用于<ul>元素本身，不能使用父元素。

我尝试过，display:inline-flex但是您无法将<li>项目居中对齐，因此有任何可行的方法吗？

这是我的小提琴，但我无法将<li>中心对齐为：https : //jsfiddle.net/pymg30yr/

Answer 1

问题inline-flex在于您ul将采用其内容的宽度，因此无法将项目居中放置（因为两边都没有空间）

为了解决这个问题，只需ul flex先添加，然后添加justify-content:center：

ul {
    padding:0; 
    margin:0;
    display: flex;
    list-style: none;
    justify-content:center;
}

<ul>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
	<li>Link 4</li>
	<li>Link 5</li>
	<li>Link 6</li>
	<li>Link 7</li>
	<li>Link 8</li>
	<li>Link 9</li>
	<li>Link 10</li>
</ul>