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

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

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

这是我的 fiddle ,但我无法对齐 <li>在中心为: https://jsfiddle.net/pymg30yr/

最佳答案

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>
	

https://stackoverflow.com/questions/42278794/

相关文章:

python-3.x - Python 3 inside Sublime Text with Ana

php - Woocommerce 优惠券添加自定义复选框

ruby - 安装 jekyll-admin 到 github pages 托管的 jekyll 站

c# - WinForms 列标题 FontStyle

bash - 在 bash 命令输出中添加前缀

three.js - 围绕轨道旋转对象

reactjs - 在reactjs中使用具有相同路由路径的条件组件

bash - 创建动态变量名bash并获取值

php - 如何从还包含整数的字符串中仅提取 float (小数)

sql - 主键和标识有什么区别?