私はそこにCSSの達人がいることを期待しています... 私は、水平ナビゲーションバーを含むサイトのレスポンシブなレイアウトを構築しています一番上にあります。このバーには同じ幅の5つのボタンがあります（ただし、この幅は柔軟にする必要があります）。小さなビューポート幅のデバイスでメニューを表示するときのボタンのテキストの代わりにアイコンを使用したいと思います。私は、ビューポートの幅が適切なサイズに達したと感じたら、メディアクエリを使用してテキストを使用するようにレイアウトを調整します。アイコン自体のサイズを変更する必要があるとは予想していないため、これは重要です。私はそれらがボタンの中心に固定サイズであることができてうれしく、ボタンのサイズ自体が変更されると、中心のアイコンの周りに単に「パディング」があります。 通常は、1つのイメージにすべてのアイコンを使用し、イメージの正しい部分だけを表示するためにスプライト技法を使用しますが、問題が発生しました。アンカー要素が親リスト要素を埋めるようにしたい場合、どうすればスプライトを中心に置くことができますか？ここでレスポンシブデザイン内のCSSスプライトの使い方
は、いくつかの例のマークアップです： 最初のHTML（スニペット）
<nav>
<ul class="top_nav">
<li><a class="link_1" href="#">link 1</a></li>
<li><a class="link_2" href="#">link 2</a></li>
<li><a class="link_3" href="#">link 3</a></li>
<li><a class="link_4" href="#">link 4</a></li>
<li><a class="link_5" href="#">link 5</a></li>
</ul>
</nav>
そして、私はこのようにそれをスタイルかもしれません：
nav ul {
width: 100%;
overflow: auto;
}
nav li {
float: left;
width: 20%;
background: #2c2c2c; /* dark background for light icons */
}
nav li a {
display: block;
border: 1px solid #e7e7e7;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
text-indent: -15000px;
width: 48px;
height: 48px;
margin: 0 auto;
}
nav li a.link_1 {
background-position: 0 0;
}
nav li a.link_2 {
background-position: 0 -49px;
}
など....
しかし、この親要素のサイズに応じて幅を変更できるボタン内で48px x 48pxのクリック可能な領域しか得られません。アンカー要素を親リスト要素に塗りつぶした場合、マージンルールを使用してアイコンを中央揃えすることはできません。 私が空だったが、それはこのような背景だとアイコンを持っていたアンカー要素内の別の要素を追加することができます。と
<li><a href="#"><div class="link_1">Link 1</div></a></li>
とスタイルそれ：
nav li a {
display: block;
border: 1px solid #e7e7e7;
width: 100%;
}
nav li a div {
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
text-indent: -15000px;
width: 48px;
height: 48px;
margin: 0 auto;
}
nav li a div.link_1 {
background-position: 0 0;
}
しかし、これは非常にセマンティックではありませんまたはエレガントなソリューション。誰もが何か良いと思うことができますか？
パーフェクト。 :: after擬似要素は完璧な仕掛けをします – musoNic80
あなたのソリューションのコードを投稿できますか？私も同様の問題があります。ありがとうございました！ –
最初のオプション '：before /：after'は、レスポンシブcssスプライト（別名スケーリングバックグラウンド）の問題をどのように解決しますか？コードを提供できますか？ –