How to align md cards horizontally in &lt;ul&gt; usi

Topic: How to align md cards horizontally in <ul> using <li> elements?

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA) free asked 8 years ago

I want to align cards horizontally using *ngFor tags in <li>, but somehow they keep aligning vertically. How do I align them? The link to my code is https://jsfiddle.net/bso7bsd5/. The cards will be received from the server and I want to align 3 cards in a row until I receive them from the server. How do I make it possible?

Add comment

Rafał Rogulski free answered 8 years ago

1 0 Best answer

Hi, It's possible with flexbox, more information you can find here: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties Regards

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA) free commented 8 years ago

Thank you, sir, for introducing me to flexbox. It is amazing. But I am facing another problem aligning card's image and card's content horizontally using flexbox. How do I perform this task?

Rafał Rogulski free commented 8 years ago

Give your li elements displa: flex and justify-content: center; this should work

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

Suraj Singh Bora , B.Tech., Mech. Engg., IIT (BHU), Varanasi (INDIA)

0Support score
1Questions 0Answers 0Snippets