Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

CSS Help Featured Yaga Badges

I'm trying to display the featured badges side-by-side in this list instead of in a single column.

I've tried:

ul.Yaga.FeaturedBadges { float: left; }

Using display: inline, float: left and a combination. I can get the badges to shift left, but they overlap the editor below and still don't display side-by-side.

Any help would be greatly appreciated!

Comments

  • Options
    hgtonighthgtonight ∞ · New Moderator

    Use diplay: inline-block; and specify a width that is less than a third of the parent container.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    @hgtonight that seems to solve the overlap issue, but the three badges are still in a single column and width just seems to change the space between the left and where the column is.

    Thoughts?

  • Options
    hgtonighthgtonight ∞ · New Moderator

    You will need to specify the width of the containing ul. Remove the float on the li elements as well.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    Thanks! I'll see if I can figure it out from here.

Sign In or Register to comment.