За последние 24 часа нас посетили 18027 программистов и 1649 роботов. Сейчас ищет 1741 программист ...

Красивое оформление списка со значениями <ul><li&gt

Тема в разделе "HTML и CSS", создана пользователем 440Hz, 3 авг 2009.

  1. 440Hz

    440Hz Старожил
    Команда форума Модератор

    С нами с:
    21 дек 2012
    Сообщения:
    8.003
    Симпатии:
    1
    Адрес:
    Оттуда
    не помню, но как-то видеол как делают отбивку для тега <b></b> и тогда текст в этом теге отступает и создается красивое оформление псевдотабличка

    HTML:
    1.  
    2. <ul class="info">
    3. <li>Псевдоним (ник)<b>{NICK}</b></li>
    4. <li>Имя<b>{FIRST}</b></li>
    5. <li>Фамилия<b>{LAST}</b></li>
    6. </ul>
    7. [html]
    8.  
    9. делается все стилями.
    10. не напомните?
    11.  
    12. [css]
    13.  
    14. ul.info li b {
    15.      ...
    16. }
    17.  
    18. [/css]
     
  2. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Ну вот простенький вариант:
    HTML:
    1. <style type="text/css" media="all">
    2. ul.info li {
    3.     display: table-row;
    4. }
    5. ul.info li b{
    6.     display: table-cell;
    7.     padding-left: 15px;
    8. }
    9. <ul class="info">
    10.     <li>Псевдоним (ник) <b>{NICK}</b></li>
    11.     <li>Имя <b>{FIRST}</b></li>
    12.     <li>Фамилия <b>{LAST}</b></li>
    13. </ul>
    Ниже идет полный вариант (скопирован из DW):

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    4. <title>Inline List</title>
    5. <style type="text/css" media="all">
    6. ul.info li {
    7.     display: table-row;
    8. }
    9. ul.info li b{
    10.     display: table-cell;
    11.     padding-left: 15px;
    12. }
    13. </head>
    14.  
    15.  
    16. <ul class="info">
    17.     <li>Псевдоним (ник) <b>{NICK}</b></li>
    18.     <li>Имя <b>{FIRST}</b></li>
    19.     <li>Фамилия <b>{LAST}</b></li>
    20. </ul>
    21.  
    22. </body>
    23. </html>
    24.  
    Работает в IE8, в версиях прежних, по идее, работать не должно.
    Хака не знаю, так как на IE плевать.
     
  3. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    [css]li
    {
    display: block;
    width: 150px;
    }

    li b
    {
    float: right;
    }[/css]

    Можете попробовать так. Но для соблюдения семантики, лучше использовать dl dt dd