[分享]css中如何将竖列变成横列

CSS中如何将竖列变成横列？其实很简单，只需要两行CSS代码就可以实现。首先，我们先了解一下竖列和横列的概念。竖列是指内容在一个列中垂直地排列，而横列则是内容在一行中水平地排列。下面是一个基本的竖列布...

CSS中如何将竖列变成横列？其实很简单，只需要两行CSS代码就可以实现。

首先，我们先了解一下竖列和横列的概念。竖列是指内容在一个列中垂直地排列，而横列则是内容在一行中水平地排列。

下面是一个基本的竖列布局的代码：

ul {
  list-style: none;
}

li {
  display: block;
} 

上面的代码可以将ul中的每一个li元素变成一个垂直排列的列。

现在我们希望将这个竖列布局变成横列布局，只需要添加下面这两行CSS代码：

ul {
  list-style: none;
  display: flex;
}

li {
  display: inline-block;
} 

上面的代码中，我们为ul元素添加了一个display属性值为flex，这是CSS3的新特性之一，可以将子元素水平排列。同时，我们将每一个li元素的display属性值改成了inline-block，这样才能在一行中水平排列。

总结一下，要想将竖列变成横列，只需要将父元素的display属性值设置成flex，并将子元素的display属性值改成inline-block即可。非常简单易用。