Question

我似乎找不到正确的方法来内联列出一个'ul'（和它的li元素，所以它们在水平而不是垂直方向上显示）在Foundation 6中（F5有一个'inline-list'类）

    <footer class="text-center">
    <div class="row" id="footer-nav">
        <div class="columns large-3 medium-3">
            <h4>Footer nav area 1</h4>
            <ul>
                <li><a href="/">Nav link 1</a></li>
                <li><a href="/">Nav link 2</a></li>
                <li><a href="/">Nav link 3</a></li>
            </ul>
        </div>

        <div class="columns large-3 medium-3">
            <h4>Footer nav area 1</h4>
            <ul>
                <li><a href="/">Nav link 1</a></li>
                <li><a href="/">Nav link 2</a></li>
                <li><a href="/">Nav link 3</a></li>
            </ul>
        </div>

        <div class="columns large-3 medium-3">
            <h4>Footer nav area 1</h4>
            <ul>
                <li><a href="/">Nav link 1</a></li>
                <li><a href="/">Nav link 2</a></li>
                <li><a href="/">Nav link 3</a></li>
            </ul>
        </div>

        <div class="columns large-3 medium-3">
            <h4>Footer nav area 1</h4>
            <ul>
                <li><a href="/">Nav link 1</a></li>
                <li><a href="/">Nav link 2</a></li>
                <li><a href="/">Nav link 3</a></li>
            </ul>
        </div>

    </div>        

    <hr class="footer-divider">

    <div class="row" id="footer-social-company">                       
        <div class="columns large-12 medium-12"> 
            <!-- how to center align the following ul? -->
            <ul class="menu align-center" id="social-list">
                <li><a href="#">twitter</a></li>
                <li><a href="#">google+</a></li>
                <li><a href="#">facebook</a></li>
                <li><a href="#">linkedin</a></li>                    
            </ul>

            <div class="" id="company">© My Company</div>
        </div>
    </div>                 

</footer>

好的，所以我发现了这个： http://foundation.zurb.com/forum/posts/36854-where-is-inline-list-in-foundation-6

但是将类'menu'添加到UL元素会使其全宽，失去正确对齐ul的能力（我希望能够精确地居中于ul）。根据文档，您可以左对齐但右对齐但不能居中对齐？ http://foundation.zurb.com/sites/docs/menu.html#item-alignment

感谢您的帮助

Answer 1

他们将其更改为.menu.simple

<ul class="menu simple">

http://foundation.zurb.com/sites/docs/menu.html#

Answer 2

在ul：

之上的父div上使用了以下内容

<div class="columns large-4 medium-4 large-centered small-centered">

如何在Foundation 6中列出ul列表？

2 个答案: