List wont appear Inline when CSS Rule is added-CodePudding

Here is my HTML:

  <div >
    <ul >
      <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.

CodePudding user response：

you should add display: flex to the ul

        <div >
   <ul  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>