让div里面的两项水平对齐

为了让HTML `<div>` 元素内的项目水平对齐，你可以使用CSS的`display` 和 `flexbox` 或者 `grid` 相关属性。这里提供两种常见的方式：

1. **Flex布局**:
如果你想使用弹性布局（flex），可以给包含项目的`<div>`加上 `display: flex;`，然后通过`justify-content`属性来调整项目之间的水平对齐方式，如：

   <div class="flex-container">
     <div>项目一</div>
     <div>项目二</div>
   </div>

   .flex-container {
     display: flex;
     justify-content: space-between; /* 或者其他的对齐方式，如 center, flex-start等 */
   }

2. **Grid布局**:
如果你更倾向于网格布局（grid），可以在`<div>` 上设置 `display: grid;`，然后通过 `grid-template-columns` 定义列数，并利用 `gap` 属性调整间隙来实现对齐：

   <div class="grid-container">
     <div>项目一</div>
     <div>项目二</div>
   </div>

   .grid-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 自动填充两列 */
     gap: 1em; /* 间距 */
   }

这两种方式都能使div内的项目水平均匀分布或按照指定方式进行对齐。