Я борюсь с CSS неупорядоченного списка, который я хочу использовать для предоставления ссылок на ряд онлайн-профилей.список отображается в нижнем колонтитуле каждой страницы, например так (внизу справа): http://www.alexbrunner.com.
я понимаю следующее:
- либо я использую CSSсвойство 'display: inline-block;'- но, учитывая его относительно слабую кросс-браузерную поддержку, я бы предпочел не делать этого.
- или я плаваю в списке и определяю «встроенную» характеристику на уровне ul - здесь, однако, моя проблеманачинается.
Если я плаваю в li-элементах слева, он, очевидно, находится на неправильной стороне текста.если я плаваю справа от li-элементов, то очевидно, что каждый элемент перемещается справа от следующего элемента, в результате чего мой список отображается в обратном порядке .
, html:
<div id="footer-right">
<p>E-mail me at mail@alexbrunner.com<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-документе и начать с последнего - но я действительно хочу выяснить, чтоэто семантически правильный способ сделать это.я уверен, что есть лучший способ, чем то, что я применил, и я был бы очень признателен за любые комментарии по этому поводу.
в конечном итоге я хочу поместить все эти значки в спрайт - но я думаю, что мне нужно решить эту проблемуздесь сначала.
спасибо!
лучше всего, alex