Question

前端很新。我正在使用Skeleton Responsive Framework设计我的网站，但我无法将我的页脚导航设置为移动布局的中心。它目前与左边对齐。

我认为我的目标不正确。有人可以帮忙吗？

以下是我正在使用的代码：

<div class="band bottom">
     <footer class="container last">
         <hr>       
            <div class="sixteen footer-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>           
            </div>

            <div class="eight columns credit">
               <p>&copy; 2013 Jacob Taylor</p>
            </div>

     </footer> <! --- End Container --->
</div>  <! --- End Band --->

以下是桌面版和移动版的CSS：

/* Footer */

.bottom footer {
    font-size: 12px;
}

div.footer-nav ul,
div.footer-nav ul li {
    margin: 0px;
}

div.footer-nav ul li {
    display:inline;
    float: left;
    position: relative;
}

div.footer-nav ul li a {
    display:inline-block;
    padding: 0px 21px 21px 0px;
    color: #2f3239; 
    text-decoration: none;
}

div.footer-nav ul li a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}

div.credit {
    text-align: right;
}

/* Footer */    

footer.last,
div.credit,
div.footer-nav {
    text-align: center;
}

div.footer-nav ul {
    text-align:center;  
}

Answer 1

从.footer-nav中删除.sixteen类并将其设置为小于100％的值，即可能为10，并添加margin：0 auto to .footer-nav

Answer 2

查看代码，看起来您正在尝试使用16列对象作为列表。将列数减少到少于12列。并确保使用“列”类来使网格正常工作。

<div class="band bottom">
 <footer class="container last footer">
        <hr>
        <div class="twelve columns footer__links">
            <ul class="nav--footer">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
            </ul>           
        </div>
        <div class="four columns">
            <div class="credit">&copy; 2013 Jacob Taylor</div>
        </div>
    </footer>
</div>

另一方面，你的css看起来非常冗长和混淆。看看你的css和标记的重构版本。理想情况下，我们希望避免任何额外的后代选择器，并在编写规则时调用不合格的元素，例如“div.class_name”。

.footer {
    font-size: 12px;
}
.footer__links {
    text-align: center;
}
.nav--footer{
    margin: 0;
    padding: 0;
    display: inline;
}
.nav--footer li {
    display:inline;
    margin-right: 4em;
}
.nav--footer a {
    text-decoration: none;
    color: #2f3239; 
}
.nav--footer a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}
.credit {
    text-align: right;
}

如何将ul与骨架中心对齐？

2 个答案: