display list items horizontally

Question

I am trying to display the items in below ul horizontally such that there are four items per row and they are at the centre of the screen. However, the items are still getting displayed vertically. I have tried using display:in-line and display:table. I have tried using margin:auto to centre the items. What am I missing ?

Here is the freemarker code where the li items are dynamically added as available :

<#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>

Here is how I tried to display maximum of the four items per row as they become available:

#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;
}

The items are still getting displayed like below:

Answer 1

I don't see any <li> elements in your HTML... The documentation for Freemarker's list directive shows it doesn't automatically add <li> elements.

Change your template to add those missing <li> elements under the <ul> when rendered, like so:

<#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>
        <li>
            <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>
        </li>
    </#list>
    </ul>
  </div>
</#if>

For the sake of readability, you also might want to consider pre-composing those long class="" attributes and other fiddly parts.

Also, you have <a type="button"> but that's not valid HTML: the <a type="" attribute is for a Content-Type hint for downloadable links - it is not anything like the <button type=""> attribute.