Question

我正在学习流畅的布局，并且在我的代码中遇到了缩放问题。我正在使用无浮动流体布局，其中div-parent尺寸由高度形成：像素，宽度：百分比，和孩子由百分比来定义。对于移动网站。

我的问题是我的页脚导航。
我的水平列表单元格不恰当地嵌入到父级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>

css display：table-cell在流体布局中不缩放

0 个答案: