twitterに関連したwebサービスを作っているとURL短縮の必要が出てくることが多々あります。
そんな時には、有名なurl短縮サービスを利用することになると思うのですが、代表的なbit.ly、TinyURLを利用する方法です。
…
レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。
cssのdisplay:table-cellで解決
html
<ul id="nav"> <li><a href="#"><img src=" nav_home.png" alt="ホーム"></a></li> <li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li> <li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li> </ul>
css
#nav ul { display: table; } #nav li { display: table-cell; padding-top: 1px; }
親要素にdisplay:table
を設定し、揃えたい子要素にdisplay: table-cell;
を設定。
これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。
vertical-alignを設定しても解決出来なかったので、padding-top: 1px;
を設定して対応しました。
このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。
この投稿へのコメント
コメントはまだありません。