如何让ul列表项每行4个水平居中显示？尝试属性后仍无效

我想让下方<ul>中的列表项水平排列，每行最多显示4个且在屏幕居中，但目前项仍垂直显示。我已尝试使用display:inline、display:table，还试过margin:auto来居中，请问我遗漏了什么？

动态添加列表项的FreeMarker代码 #

<#if realm.password && social.providers??>
  <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
    <hr/>
    <h4>${msg("identity-provider-login-label")}</h4>

    <ul id="horizontal-list" class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
      <#list social.providers as p>
        <a id="idp" id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>" type="button" href="${p.loginUrl}">
          <#if p.iconClasses?has_content>
            <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
            <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
            <#else>
              <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
          </#if>
        </a>
      </#list>
    </ul>
  </div>
</#if>

尝试实现布局的CSS代码 #

#kc-social-providers {
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

#horizontal-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: in-line;
}

#idp {
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

当前效果截图 #

目前项仍如下方截图所示垂直显示：

问题分析与解决方案 #

核心问题

1. HTML结构缺失：你的<ul>中直接嵌套<a>标签，没有<li>元素，但CSS却针对#horizontal-list li设置样式，导致样式完全无效。
2. CSS语法错误：display: in-line是拼写错误，正确写法为display: inline或display: inline-block。
3. 布局方案选择不当：用Flexbox或Grid布局能更便捷实现“每行最多4个+居中”的需求，比inline类布局更易控制。

修正步骤

1. 补全HTML结构

给每个<a>标签添加<li>包裹，同时删除重复的id="idp"（HTML元素id必须唯一）：

<ul id="horizontal-list" class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>">
  <#list social.providers as p>
    <li>
      <a id="social-${p.alias}" class="${properties.kcFormSocialAccountListButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if>" type="button" href="${p.loginUrl}">
        <#if p.iconClasses?has_content>
          <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i>
          <span class="${properties.kcFormSocialAccountNameClass!} kc-social-icon-text">${p.displayName!}</span>
          <#else>
            <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span>
        </#if>
      </a>
    </li>
  </#list>
</ul>

2. 用Flexbox实现目标布局（推荐）

替换原有CSS，给<ul>添加Flex布局规则：

#kc-social-providers {
  color: white;
  font-size: 1rem;
  font-weight: bold;
}

#horizontal-list {
  list-style: none;
  margin: 0 auto; /* 容器水平居中 */
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 超出自动换行 */
  justify-content: center; /* 每行项居中排列 */
  gap: 1rem; /* 项之间的间距，可自行调整 */
  max-width: 90%; /* 限制容器宽度，避免过度拉伸 */
}

#horizontal-list li {
  flex: 0 0 calc(25% - 1rem); /* 每行最多4个，减去gap宽度 */
  box-sizing: border-box;
}

/* 用类选择器控制a标签样式（避免动态id的问题） */
.kcFormSocialAccountListButtonClass {
  color: white;
  font-size: 1rem;
  font-weight: bold;
  display: block; /* 让a标签占满li空间 */
  text-align: center;
}

3. 可选：Grid布局方案

如果偏好Grid布局，也可以使用以下代码：

#horizontal-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22%, 1fr)); /* 自动适配每行4个 */
  gap: 1rem;
  justify-content: center;
  max-width: 90%;
}

#horizontal-list li {
  box-sizing: border-box;
}

修改后，列表项会自动水平排列，每行最多4个，整体在屏幕居中，超出数量时自动换行。

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