3

我似乎找不到在 Foundation 6 中内联列表“ul”（它是 li 元素，因此它们水平而不是垂直显示）的正确方法（F5 有一个“内联列表”类）

    <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

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

感谢帮助

4

2 回答 2

2

他们将其更改为 .menu.simple

<ul class="menu simple">

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

于 2016-01-14T22:31:52.007 回答
0

有效的是在 ul 上方的父 div 上使用以下内容：

<div class="columns large-4 medium-4 large-centered small-centered">
于 2016-01-15T05:43:30.610 回答