Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

List wont appear Inline when CSS Rule is added

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

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

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading