スマートフォンサイトのテーブル風　に　リンクを付ける

photoBy: http://www.ukiki.jp/antenna-shop/products/images/smartphone.jpg

スマートフォンサイトでのリンク付け

リンクの色が変になる・・・

ul li 要素をタッチしたらそのブロック全てを 選択させたい。
でも、web用のコーディングだとうまくやってくれない。

解決方法は？

liタグ自体を a で囲む。

<style type="text/css">
    
    .like-table a /* table */ {
        display: table;
        width: 100%;    
    }
    
    .like-table li /* row */{
        display: table-row;
    }
    
    .like-table li > div{
         display: table-cell;
    }
    
    
    .like-table li div:nth-child(odd) /* td */ {
        width: 30%;
    }
    
    .like-table li div:nth-child(even) /* td */ {
        width: 70%;
    }

</style>

<ul class="like-table">
    <a href="/">
        <li>
            <div>
                30%
            </div>
            <div>
                70%
            </div>
        </li>
    </a>
    
    <a href="/">
        <li>
            <div>
                30%
            </div>
            <div>
                70%
            </div>
        </li>
    </a>
    
</ul>

これで li 全てを選択できるようになります。

テーブル風に左右に 2列に分けて、それぞれリンクを設定したい

ul.categoryselect , ul.categoryselect-single /* table */{
    display: table;
    width: 100%;
    margin:0;
    padding:0;
}



.categoryselect li , ul.categoryselect-single /* tr */ {
    display: table-row;
    
}

.categoryselect li > div , ul.categoryselect-single > div/* tr */ {
     display: table-cell;
}

.categoryselect li > div /* td */ {
    width: 50%;
    border-bottom:1px solid #ddd;
}

.categoryselect li > div:nth-child(odd) {
    border-right:1px solid #ddd;
}

.categoryselect a {
    padding:10px 0px 10px 10px;
    font-size:12px;
}

html

<ul class="categoryselect">

<li>

    <div>
        <a href="/hoge/">hogeへ</a>
    </div>
    <div>
        <a href="/mange/">mangeへ</a>
    </div>

</li>

</ul>

li を table-cell にする

<style type="text/css">

.paginator ul{
    margin:0;
    padding:0;
    display: table-row;
}

.paginator li{
    margin:0;
    padding:0;
    display: table-cell;
    width: 33%;
}

.paginator ul a{
    display:block;
}


.paginator {
    display: table;
    width: 100%;
    margin:0;
    padding:0;
    text-align:center;
}


</style>


<div class="paginator">
    <ul>
        <li>
            <a href="/"> < </a>
        </li>
        
        <li>
            center
        </li>
    
        <li>
            <a href="/"> > </a>
        </li>
    </ul>
</div>

これで

< | center | >

というデザインが完成します。