CSS 'float' und 'inline-block' in einer ungeordneten Liste

Kämpfe ich mit der CSS von einer ungeordneten Liste, die ich verwenden möchten, um links zu einer Reihe von online-Profilen. die Liste erscheint in der Fußzeile auf jeder Seite, wie dies (rechts unten): http://www.alexbrunner.com.

mein Verständnis ist das folgende:

• entweder nutze ich die CSS-Eigenschaft 'display:inline-block;' - aber angesichts Ihrer relativ schlechten cross-browser-Unterstützung, die ich würde es vorziehen, nicht zu.
• oder ich schweben die Liste und definieren Sie das 'inline'-Merkmal auf der ul-Stufe - hier jedoch, wo mein Problem beginnt.

wenn ich float der li-Elemente Links, es ist offensichtlich positioniert ist auf der falschen Seite des Textes. wenn ich float der li-Elemente direkt, offensichtlich wird jedes Element nach rechts gefloatet der folgenden Artikel die Ergebnisse in meiner Liste dargestellt, in der umgekehrten Reihenfolge.

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>

und das css ist:

#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; }

natürlich könnte ich einfach die Reihenfolge umkehren in mein html-Dokument, und beginnen Sie mit der letzten - aber ich möchte wirklich, um herauszufinden, was ist die semantisch korrekte Weg, dies zu tun. ich bin sicher, dass es einen besseren Weg gibt, als das, was ich habe und ich würde wirklich zu schätzen alle Kommentare zu diesem.

schließlich möchte ich alle diejenigen, die icons in ein sprite - aber ich glaube, ich habe um dieses Problem zu lösen Sie zunächst hier.

danke!

besten,
alex