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>

Answer 2

HTML

<ul>
  <li>a list item </li>
  <li>a loooooooooooooooooooong list item </li>
  <li>another list item</li>
</ul>

CSS

ul {
  display: table;
  margin: 0 auto;
}

li {
  float: left;
  margin: 0 10px;
  list-style-type: none;
}

演示 http://jsfiddle.net/fNFYr/467/

将所有UL LI元素在中心的一行中对齐，仅将CSS应用于UL？

2 个答案: