css列表头竖排和横排的

CSS中的列表样式是网页设计中经常使用的元素之一。我们可以使用CSS来控制列表的显示方式，其中包括列表头的排列方式。在CSS中，我们可以将列表头竖排显示或者横排显示。下面我们将介绍如何使用CSS实现这两种列表头排列方式。

首先我们来看一下列表头竖排的实现方式。可以通过以下CSS代码来实现：

ul{
  list-style:none;
  padding:0;
  margin:0;
}
li{
  display:inline-block;
  transform:rotate(270deg);
  transform-origin:left top;
  white-space:Nowrap;
  margin:0 10px;
  padding:5px;
  background-color:#333;
  color:#fff;
  font-size:16px;
  letter-spacing:1px;
}

以上代码将列表项(li)设置为行内块元素，并使用transform属性将其旋转270度。同时设置transform-origin为左上角，保证竖排时旋转中心为列表项左上角。white-space属性设置为Nowrap，使得列表项保持不折行。接着设置了其他样式属性，如margin、padding、background-color、color、font-size、letter-spacing等，以便美化列表头样式。

下面我们来看一下列表头横排的实现方式。可以通过以下CSS代码来实现：

ul{
  list-style:none;
  padding:0;
  margin:0;
}
li{
  display:inline-block;
  white-space:Nowrap;
  margin:0 10px;
  padding:5px;
  background-color:#333;
  color:#fff;
  font-size:16px;
  letter-spacing:1px;
}

以上代码与竖排方式的代码相比，去掉了transform属性。同时，将列表项设置为行内块元素并设置white-space为Nowrap，使得列表项保持不折行。接着设置了其他样式属性，如margin、padding、background-color、color、font-size、letter-spacing等，以便美化列表头样式。

以上就是CSS中实现列表头竖排和横排的方法。我们可以根据需要选择适合的方式来美化列表头样式，以让网页设计更加美观和易读。