四个LI在UL内横向对齐的

要在HTML的无序列表`<ul>`中使四个`<li>`元素水平并排对齐，你可以使用CSS的flexbox布局或者grid布局。以下是两种常见方法：

### 使用Flexbox布局：
在`.ul-container`类下的`ul`标签添加以下CSS：

.ul-container {
  display: flex; /* 开启flex布局 */
  justify-content: space-between; /* 列表项间均匀分布 */
}

ul {
  list-style-type: none; /* 去掉默认的点或数字 */
  padding: 0; /* 清除列表内边距 */
}

li {
  flex: 1; /* 每个列表项占一等份宽度 */
  box-sizing: border-box; /* 包含边框和内边距在元素尺寸内 */
}

然后在HTML里创建`<ul>`：

<div class="ul-container">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
  </ul>
</div>

### 使用Grid布局：
CSS Grid则需要稍微复杂一些设置，但效果更为直观：

.ul-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 创建4列等宽的网格 */
  gap: 1em; /* 设置相邻格子之间的距离 */
}

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

li {
  /* 样式同上 */
}

同样，在HTML里添加`<ul>`：

<div class="ul-container">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
  </ul>
</div>