在网页设计中,列表是常用的元素之一。有时候,我们希望列表以水平的方式展示,而不是垂直的方式。在这篇文章中,我将演示如何使用 CSS 设置列表水平显示。首先,我们需要添加一个无序列表或有序列表到 HTM
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
ul { list-style: none; /* 去掉默认的列表样式 */ display: flex; /* 将列表变成弹性容器 */ margin: 0; /* 去掉默认的外边距 */ padding: 0; /* 去掉默认的内边距 */ } li { margin-right: 20px; /* 添加一些间距 */ }
li { display: flex; /* 将列表项变成弹性容器 */ align-items: center; /* 垂直居中 */ margin-right: 20px; /* 添加一些间距 */ }
粉丝
0
关注
0
收藏
0