给我写一个好看的列表三列左左右的html和css

以下是一个基本的三列左左右的HTML和CSS，你可以根据需要进行修改和美化：

HTML代码：

<div class="container">
  <div class="left-column">
    <ul>
      <li>左侧栏目1</li>
      <li>左侧栏目2</li>
      <li>左侧栏目3</li>
    </ul>
  </div>
  <div class="middle-column">
    <ul>
      <li>中间栏目1</li>
      <li>中间栏目2</li>
      <li>中间栏目3</li>
    </ul>
  </div>
  <div class="right-column">
    <ul>
      <li>右侧栏目1</li>
      <li>右侧栏目2</li>
      <li>右侧栏目3</li>
    </ul>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
}

.left-column,
.middle-column,
.right-column {
  width: 30%;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}

.left-column {
  order: 1;
}

.middle-column {
  order: 2;
}

.right-column {
  order: 3;
}

说明：

- `display: flex;` 设置容器为弹性布局。
- `flex-wrap: wrap;` 允许子元素在容器中换行。
- `justify-content: space-between;` 子元素在容器中平均分布。
- `margin: 0 auto;` 居中容器。
- `max-width: 1200px;` 设置容器最大宽度为 1200px。
- `width: 30%;` 设置每一列的宽度为 30%。
- `order: 1/2/3` 设置每一列的显示顺序。