List wont appear Inline when CSS Rule is added

Question

Here is my HTML:

  <div class="info">
    <ul class="items">
      <li>
        <img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
        <p>Facebook Premier Level Agency Partner</p>
      </li>
      <li>
        <img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
        <p>Google Endorced Marketing Partner</p>
      </li>
      <li>
        <img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
        <p>Forbes Agency Council Member</p>
      </li>
      <li>
        <img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
        <p>Inc. 5000 Fastest Growing Company</p>
      </li>
      <li>
        <h1>$100M</h1>
        <p>In Annual Digital Ad Spend</p>
      </li>
      <li>
        <h1>15+</h1>
        <p>Years of Facebook Avertising Experience</p>
      </li>
    </ul>
  </div>

My CSS:

.info {
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.items li {
  list-style: none;
  display: inline;
}

Here is also a JSFiddle:

https://jsfiddle.net/5xy7zqm6/2/

Basically, I use the same code on my Navbar menu and it works, but here it just wont budge.

Because your `
` elements inside the `li` are `display: block` by default. Make them `inline` too... — Rene van der Lende, Aug 13 '22 at 14:20

score 2 · Accepted Answer · answered Aug 13 '22 at 14:17

you should add display: flex to the ul

        <div class="info">
   <ul class="items" style="
      display: inline-flex;
      ">
      <li>
         <img id="fb" src="imgs/logo-partner-facebook-Marketing.png" alt="Facebook Marketing Partner Black Logo">
         <p>Facebook Premier Level Agency Partner</p>
      </li>
      <li>
         <img id="google" src="imgs/Google-Partner-logo.webp" alt="Google Partner Black Logo">
         <p>Google Endorced Marketing Partner</p>
      </li>
      <li>
         <img id="forbes" src="imgs/FAC-Badge-Circle-Blue2022.png" alt="FAC Badge 2022">
         <p>Forbes Agency Council Member</p>
      </li>
      <li>
         <img id="inc" src="imgs/Inc5000_PrimaryBlackStackedLogo.png" alt="Inc 500 Black Logo">
         <p>Inc. 5000 Fastest Growing Company</p>
      </li>
      <li>
         <h1>$100M</h1>
         <p>In Annual Digital Ad Spend</p>
      </li>
      <li>
         <h1>15+</h1>
         <p>Years of Facebook Avertising Experience</p>
      </li>
   </ul>
</div>

Thank you! Do you mind telling me how I can also align items center and at the same time justify content center. I want to get rid of the margin-right and justify space between and align items center. I updated the fiddle accordingly. — Peter Brezitski, Aug 13 '22 at 14:33

List wont appear Inline when CSS Rule is added

1 Answers1