[分享]css中如何把ul变成行排列

在 CSS 中，通过设置 display 属性来将 ul 变成行排列。

ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline-block;
    margin-right: 20px;
} 

上面的代码将 ul 的 display 属性设置为 inline-block，这样 ul 元素就变成了行内块元素，并能够在一行中显示。同时，将 li 的 display 属性也设置为 inline-block，这样 li 元素也能够在一行中显示。

需要注意的是，为了消除 ul 和 li 默认的间距和样式，我们设置了 margin、padding 和 list-style 属性。

上述代码可以实现多个 ul 元素在一行中排列，并且每个 ul 中的 li 元素也在同一行中排列。

<div class="container">
    <ul class="list">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
    <ul class="list">
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>
</div> 

以上是实现 ul 变成行排列的方法和示例，希望对你有所帮助。