gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 08:56:08 27 4
gpt4 key购买 nike

您将如何制作所有 <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>

关于html - 将所有 UL LI 元素对齐在一行中并仅将 CSS 应用于 UL?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42278794/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com