1

非常新的前端。我正在使用 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;  
}
4

2 回答 2

0

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

<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;
}
于 2013-07-04T08:05:32.337 回答
0

从 .footer-nav 中删除 .sixteen 类并将其设置为小于 100% 的值，例如 10 并添加 margin: 0 auto 到 .footer-nav

于 2013-07-04T07:39:41.640 回答