添加CSS规则后列表无法横向排列，同代码在导航栏可正常生效

你的代码里.info虽设置了flex，但它的直接子元素是<ul class="items">，这个ul默认是块级元素会占满整行宽度，再加上你给li设置的display: inline无法适配li内部的块级元素（比如h1、p），最终导致列表还是纵向排列。

修改后的CSS代码 #

.info {
  margin-top: 70px;
}

.items {
  list-style: none;
  padding: 0; /* 清除ul默认内边距 */
  margin: 0; /* 清除ul默认外边距 */
  display: flex; /* 将ul设为flex容器，让子元素li横向排列 */
  gap: 20px; /* 给列表项之间添加间距，可按需调整 */
  align-items: center; /* 让列表项内部内容垂直居中 */
}

.items li {
  text-align: center; /* 让列表项内的图片和文字居中对齐 */
  flex: 1; /* 让每个列表项均匀分配可用宽度，可选属性 */
}

/* 可选优化：调整标题和段落的边距，避免间距过大 */
.items li h1 {
  margin: 0 0 5px 0;
}
.items li p {
  margin: 0;
}

为什么导航栏能用但这里不行？ #

导航栏的列表项通常只包含行内/行内块元素（比如a标签），display: inline或inline-block就能实现横向排列。但你的列表项里包含h1、p这类块级元素，display: inline无法维持横向布局，必须通过给ul设置flex来控制整体排列逻辑。

另外，你的HTML里有两处拼写错误：Google Endorced应改为Google Endorsed，Facebook Avertising应改为Facebook Advertising，建议修正。

内容的提问来源于stack exchange，提问作者Peter Brezitski