Horizontally list items

1

Hello,

I have the following:

<div class="row">
  <div class="col col-33" style="text-align:center;">
    <ul style="display:inline;">
      <li><i class="icon ion-star"></i></li>
      <li><i class="icon ion-star"></i></li>
      <li><i class="icon ion-star"></i></li>
      <li><i class="icon ion-star"></i></li>
      <li><i class="icon ion-star"></i></li>
    </ul>
  </div>
</div>

This code generates five stars stacked on top of one another. However, I want to lay them out horizontally.

How do I layout list items horizontally in Ionic?

Thank you!

2

Flexbox to the rescue

1 Like
3

Perhaps I’m missing something. However, the CodePen is not appearing. I noticed you referenced a class called ‘padding’. However, I do not see it in the CSS. I don’t think that’s the issue. Either way, I do not see the example rendering. Thank you for trying though.

4

This is codepens issue, remove the https from the url and it will render.

“http://codepen.io/mhartington/pen/fGxqb”