スマートフォンサイトのテーブル風 に リンクを付ける
2013年8月16日更新 view: 308 view
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>
テーブル風に左右に 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 | >
スポンサードリンク
というデザインが完成します。
スポンサードリンク
関連記事
関連カテゴリ

コロ助
web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!
ピックアップ
-
LINEで異性と出会う3つのコツ
view: 32 view
パソコン・ソフトウェア ランキング
12月14日 ( 土 ) にアクセスが多かった記事はこちら!
-
mysql で 先頭、末尾の半角スペース全角スペースを削除
view: 89 view -
twitterbootstrap アクティブなタブを取得
view: 1123 view -
phpstorm ftp設定 さくらサーバー編
view: 44 view -
無料のタイピングソフトまとめ!
view: 2 view -
jqueryでソート、フィルタリング。テーブル以外でも動くisotopeの使い方
view: 235 view -
スマホ、レスポンシブ、bootstrapでアルファベットがはみ出すcss対策
view: 38 view -
cakephp2.xサーバー移転手順
view: 13 view -
jquery 自動リンクの決定版
view: 32 view -
htmlsqlより速い軽い。cakephpでスクレイピングgoutte.phpインストールと使い方
view: 298 view -
iphone バックアップ先を変更 windows7編
view: 4708 view