CSS - отображать два текстовых блока в одной строке

Question

Как я могу расположить два текстовых блока на одной строке, один слева и один справа, без использования float?

Как это:

Bla bla                   5
Whatever                 25
Boo                      12

Каждая строка представляет собой элемент списка - <LI>

Answer 1

В вашем примере есть цифры, которые указывают на то, что вы, возможно, отображаете табличные данные.Если это так, используйте таблицу.Easy!

Если это не так, используйте span s с заданной шириной:

.label {
     display: inline-block;
     width: 200px; // or whatever
}

и:

<ul>
    <li>
        <span class="label">Blah blah</span>
        5
    </li>
    <li>
        <span class="label">Stuff</span>
        25
    </li>
</ul>

Answer 2

Вы можете использовать таблицы. Кроме того, вы можете использовать абсолютное позиционирование и устанавливать одинаковое значение для верха и низа для каждого объекта ul

Answer 3

Вот очень простой трюк, который я использовал. Он использует float s, но я думаю, что он выглядит довольно красиво:

HTML:

<h1 class="title1">Chicken Craft</h1>
<h1 class="title2">Minecraft Server</h1>

CSS:

.title1 {
  text-align: left;
  color: #269CEB;
  margin-top: 0px;
  float: left;
  clear: both;
}

.title2 {
  text-align: left;
  color: #FF9D00;
}

Answer 4

Я знаю, что это старый вариант, но кажется, что наиболее семантически правильным вариантом здесь будет использование DL, DT и DT вместо LI.

<dl>
<dt>Bla bla</dt><dd>5</dd>
<dt>Whatever</dt></dd>25</dd>
<dt>Boo</dt><dl>12</dl>
</dl>

Тогда вы бы сделали это так:

dl {
    margin: 0;
}

dt {
    clear: left;
    float: left;
    padding: 0 0 2px;
    font-weight: bold;
}

dd {
    float: left;
    margin-left: 10px;
    padding: 0 0 2px;
}

Я знаю, что вы предусмотрели отсутствие поплавков, но это способ выполнить работу.

Answer 5

Вы можете увидеть рабочий пример здесь

ul {
    list-style-type:none;
}
li span {
    display:inline-block;
    width:100px;
}

<ul>
    <li>
        <span>Bla Bla</span>
        <span>5</span>
    </li>
    <li>
        <span>Whatever</span>
        <span>25</span>
    </li>
</ul>