0
多くのオンラインプロファイルへのリンクを提供するために使用したい順序のないリストのCSSに苦労しています。リストはすべてのページのフッターに表示されます（右下）：http://www.alexbrunner.com。順序付けられていないリストのCSS 'float'と 'inline-block'との比較
私の理解は以下の通りです：
- のいずれか、私はCSSプロパティを利用します「表示：インラインブロック;」 - しかし、その比較的貧弱なブラウザ間のサポートを受けて、私は好まないでしょう。
- 、またはリストを浮動させ、ulレベルの「インライン」特性を定義します。ただし、ここで問題が始まる場所です。
もし私が左に浮動小数点要素を浮動させるなら、それは明らかにテキストの反対側に置かれます。 li要素を右に浮動させると、明らかに各項目は次の項目の右側に浮かれます。その結果、リストはの逆順で表示されます。
HTMLは次のとおりです。
<div id="footer-right">
<p>E-mail me at [email protected]<br />or visit my profiles at <ul id="profiles">
<li><a href="http://www.facebook.com/alexbrunner" target="_blank"><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></a></li>
<li><a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank"><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></a></li>
<li><a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank"><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></a></li>
<li><a href="http://at.linkedin.com/in/abrunner/en" target="_blank"><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></a></li>
</ul></p>
</div>
とCSSは次のとおりです。もちろん
#footer-right { float:right; width:17em; border:0; border-top:1px dotted #333; text-align:right; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-right p { display:inline; font-size:.75em; color:#666; }
#footer-right ul { display:inline; margin:0; padding:0; }
#profiles li { float:right; list-style:none; }
、私はちょうど私のHTMLドキュメント内の順序を逆にし、最後に開始することができます - しかし、私が本当にしたいですこれを行う意味的に正しい方法が何かを理解する。私は、私が適用したものよりも良い方法があると確信しており、私は本当にこれに関するコメントを感謝します。
私はこれらのアイコンをすべてスプライトに入れたいと思っていますが、私はまずこの問題をここで解決しなければなりません。
ありがとうございました！
最高
、 アレックス
ありがとうございます！これはうまく動作します。 – alexbrunner