css - css 表示:可変レイアウトでテーブルセルがスケーリングされない

Question

流動的なレイアウトについて学んでいますが、コードのスケーリングの問題に戸惑っています。div-parent ディメンションが高さ: ピクセル、幅: パーセンテージで形成され、子がパーセンテージで定義される floatless 流動レイアウトを使用しています。携帯サイト用。

私の問題は、フッター ナビゲーションにあります。
横方向のリスト セルが親の 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>