CSS для выравнивания LI

Question

У меня есть список пар (имя, значение), и я хотел бы отобразить их вертикально выровненными, как в таблице:

aaaaaaaa    first_value
bbbb        second_value
ccc         third_value
ddd         fourth_value

Есть ли способ сделать это в HTML / CSS, без использования таблиц (я полагаю, я должен каким-то образом использовать теги UL / LI)?

Answer 1

Да. Используйте список определений.

<dl>
  <dt>aaa</dt>
  <dd>111</dd>

  <dt>bbb</dt>
  <dd>222</dd>

  <dt>ccc</dt>
  <dd>333</dd>
</dl>

, а затем

<style>
    dl dt { width: 100px; float: left; }
    dl dd { margin-bottom: 10px; }
</style>

http://jsfiddle.net/wr6wL/

Answer 2

Для меня это выглядит как список определений :

<dl>
    <dt>aaaaaaaa</dt>
    <dd>first_value</dd>

    <dt>bbbb</dt>
    <dd>second_value</dd>

    <dt>ccc</dt>
    <dd>third_value</dd>

    <dt>ddd</dt>
    <dd>fourth_value</dd>
</dl>

Некоторые стили CSS в этом вопросе .

Answer 3

попробуйте что-то вроде этого:

   <ul>
        <li><span class="fixedWidth">aaaaaaaa</span>first_value
        <li><span class="fixedWidth">bbbb</span>second_value
        <li><span class="fixedWidth">ccc</span>third_value
        <li><span class="fixedWidth">ddd</span>fourth_value
   </ul>      

в вашем CSS добавить

.fixedWidth { display: inline-block; width: 100px }

Answer 4

Конечно, вы можете сделать это только с помощью CSS, но почему бы не использовать таблицу?Это совершенно правильное использование одного.

Тем не менее, пример только с CSS:

<ul>
    <li><div>name</div><div>value</div></li>
</ul>



li {overflow: auto;}
li div {width: 50%; float: left;}

Answer 5

.name { display: inline-block; width: 100px }

Рассмотрите возможность использования таблицы, если у вас есть табличные данные. Для этого и были созданы столы.

Answer 6

Вы могли бы сделать что-то вроде этого

HTML

<div id="main">
    <div class="row">
        <p class="cell">aaaaaa</p><p class="cell">first_value</p>
    </div>
    <div class="row">
        <p class="cell">bbbb</p><p class="cell">second_value</p>
    </div>
    <div class="row">
        <p class="cell">ccc</p><p class="cell">third_value</p>
    </div>
    <div class="row">
        <p class="cell">ddd</p><p class="cell">fourth_value</p>
    </div>
</div>

CSS

#main{display:table;}
.row{display:table-row;}
.cell{display:table-cell; padding:10px;}

http://jsfiddle.net/jasongennaro/cHhTE/

Answer 7

Вы можете создать группу тегов div , которые имеют стиль таблицы.

Создайте свои HTML-дивы следующим образом:

<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>

Затем вы можете добавить cssстиль, чтобы получить желаемый вид:

.div-table{display:table; border:1px solid #003399;}

.div-table-caption{display:table-caption; background:#009999;}

.div-table-row{display:table-row;}

.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399

Просмотр jsFiddle для конечного результата.