1

我正在学习流体布局，并且对我的代码中的缩放问题感到困惑。我正在使用无浮动流体布局，其中 div 父尺寸由高度：像素，宽度：百分比形成，而子元素由百分比定​​义。对于移动网站。

我的问题是我的页脚导航。
我的水平列表单元格不平衡地适合父 ul --- 对于空间来说太小（在垂直移动视图中查看时）或太大（在监视器或水平移动视图中）。我需要 li 块适合并位于页脚中心并随着视口变大而缩放。

我确信这是一个简单的解决方法，但对我来说不是。我已经尝试移动测量以使其正常工作。我很想为我重新审视一下这个:)

这是移动页面的模型

CSS

footer {
    height:53px;
    width:100%;
    max-width:640px;
    margin:auto
}
#lower-navigation > ul {
    display:table;
    border-spacing:3px
}  
#lower-navigation > ul > li {
    display:table-cell
}
#lower-navigation  ul {
    height:100%;
    width:100%
} 
#lower-navigation  li {
    width:31%;
    height:100% !important;
    margin:auto auto;
    text-align:center
}
img.pic {
    max-width:100%;
    margin:0;
    padding:0
}
#lower-navigation a {
    display:block;
    padding:5%;
    border:thin #000 solid;
    font-size:.8em;
    color:#ccc;
    font-weight:300;
}look at this

HTML

<footer>
    <nav id="lower-navigation">
        <ul>
            <li><a href="/m/news.cfm"><img src="/m/img/purple-icon-news.png" class="pic" alt="" width="26" height="25" /> NEWS</a></li>
            <li><a href="sms:phone-number"><img src="/m/img/purple-icon-chat.png" class="pic" alt="" width="26" height="25" /> TEXT D.V.</a></li>
            <li><a href="/m/index.cfm"><img src="/m/img/purple-icon-home.png" class="pic" alt="" width="26" height="25" /> SHOP</a></li>
        </ul>
    </nav>
</footer>
4

0 回答 0