There are two ways to build inline lists in Foundation 4: with our predefined HTML or with our mixins. Building inline lists using our predefined classes is easy. You'll start with an unordered list and add a class of
.inline-list to it. From there, you just need to add list items with links in them.
For these styles to come across, make sure you have the default Foundation CSS package or that you've selected inline-lists from a custom package. These should be linked up following our default HTML page structure.
We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the extension installed or grab _foundation-global.scss, _global.scss and _inline-lists.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:
You can build your inline lists using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered list full of list items, the code looks like this:
emCalc(); is a function we wrote to convert
em. It is included in _foundation-global.scss.