html - 将所有 UL LI 元素对齐在一行中并仅将 CSS 应用于 UL？

Question

您将如何制作所有 <li> <ul> 中的元素元素显示在一行中，您将如何在页面上将整个列表居中？您必须将 CSS 直接应用于 <ul>元素本身，您不能使用父元素。

我试过 display:inline-flex但是你不能对齐 <li>元素在中心，所以有什么可能的方法吗？

这是我的 fiddle ，但我无法对齐 <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>