[分享]css3把列表同在一行

CSS3是CSS（层叠样式表）的最新版本，在CSS的基础上新增了许多新功能和特性，使得网页开发者可以更加灵活和精细地控制页面的样式和布局，其中包括把列表同在一行。ul { display: flex;...

CSS3是CSS（层叠样式表）的最新版本，在CSS的基础上新增了许多新功能和特性，使得网页开发者可以更加灵活和精细地控制页面的样式和布局，其中包括把列表同在一行。

ul {
  display: flex; /*使用Flex布局*/
  flex-direction: row; /*设置主轴为水平方向*/
  justify-content: space-between; /*设置列表项之间的间距*/
}
li {
  display: inline-block; /*把列表项设为行内块元素，让它们在同一行显示*/
} 

以上代码中，我们首先将ul元素设为Flex布局，然后设置它的主轴为水平方向，即让列表项在同一行上排列；接着使用justify-content属性来设置列表项之间的间距，最后把li元素设为行内块元素，让它们在同一行上显示。

通过CSS3的这些新特性，我们可以轻松地实现把多个列表项设置在同一行上，这为网页开发带来了更多更方便的实现方式。