Блог

Итак, я работаю над меню, меню представляет собой список, а заголовки меню имеют класс, отличный от описания меню.

 <ul class="menu-01">

  <li class="menu-title">CHICKEN CASHEW NUT  <span>12</span></li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PANANG BEEF <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">GREEN CURRY CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PAD PIK KING CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>

</ul>
  

Я хочу, чтобы цены совпадали друг с другом после названия товара. Но я не уверен, как именно я бы это оформил. В настоящее время я просто даю ему margin-right .

Простым решением было бы float указать цену справа:

 ul {
  max-width: 20em;
  margin: 0 auto;
  list-style: none;
}

li {
  margin-bottom: 1em;
}

li span {
  float: right;
}  

 <ul class="menu-01">
  <li class="menu-title">CHICKEN CASHEW NUT <span>12</span>
  </li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PANANG BEEF <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">GREEN CURRY CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PAD PIK KING CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
</ul>  

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

 <table>
    <tr><td>CHICKEN CASHEW NUT</td><td>12</td></tr>
    <tr><td colspan="2">lorem ipsum</td></tr>
    <tr><td>PANANG BEEF</td><td>12</td></tr>
</table>
  

ответ @ Fabian Schultz работает хорошо, вот еще одно решение с flexbox:

Это создает каждый .menu-title контейнер flexbox (по display: flex ) и перемещает span вправо, предоставляя ему margin-left: auto

Примечание: Я не знаю, что означает «sn», но я полагаю, что это должно быть внутри span.

 ul {
  list-style: none; 
  }
.menu-title {
  display: flex;
  font-size: 16px;
  }
.menu-title span {
  margin-left: auto;
  color: #ccc;
  }

.menu-meal {
    margin: 0 0 12px 16px;
}  

 <ul class="menu-01">

  <li class="menu-title">CHICKEN CASHEW NUT  <span>12</span></li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PANANG BEEF <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">GREEN CURRY CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>
  <li class="menu-title">PAD PIK KING CHICKEN <span>12</span>sn</li>
  <li class="menu-meal">lorem ipsum</li>

</ul>  

Как справедливо сказал @johannes, flexbox — это еще один способ решить эту проблему, и это мой предпочтительный маршрут, потому что он намного эффективнее в использовании.

Если требуется, прочитайте больше о Flexbox здесь

Кроме того, поскольку я не знаю, что такое ‘sn‘, я добавил его к цене, как вы бы сделали, если бы это была валюта.

Смотрите мое решение ниже:

Обратите внимание, что: ‘sn‘ был удален из тегов’li‘, поскольку они добавляются динамически с помощью CSS

HTML

 <ul class="menu-01">
    <li class="menu-title">CHICKEN CASHEW NUT  <span>12</span></li>
    <li class="menu-meal">lorem ipsum</li>
    <li class="menu-title">PANANG BEEF <span>12</span></li>
    <li class="menu-meal">lorem ipsum</li>
    <li class="menu-title">GREEN CURRY CHICKEN <span>12</span></li>
    <li class="menu-meal">lorem ipsum</li>
    <li class="menu-title">PAD PIK KING CHICKEN <span>12</span></li>
    <li class="menu-meal">lorem ipsum</li>
</ul>
  

CSS

 /* some ul styles */
ul {
    position: relative;
    max-width: 20em;
    margin: 0 auto;
    padding: 0;
}

/* li display set to flex, so content flows as expected */
li {
    position: relative
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

/* 'sn' appended to the '.menu-title' span using ':after' pseudo-element */
.menu-title > span:after {
    content: "sn";
}

.menu-meal {
    font-style: italic;
    margin-bottom: 2.5em;
}
  

Смотрите демонстрацию на jsfiddle

Надеюсь, это полезно.