Question

所以我在菜单上工作，菜单是一个列表，菜单标题与菜单描述的类别不同。

<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>

我希望价格在项目标题后相互排列。但我不确定我的风格究竟如何。 I'm currently just giving it a margin-right

Answer 1

一个简单的解决方案是float右边的价格：

＆＃13;

ul {
  max-width: 20em;
  margin: 0 auto;
  list-style: none;
}

li {
  margin-bottom: 1em;
}

li span {
  float: right;
}

＆＃13;

<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>

＆＃13;

Answer 2

您还可以使用以下表格：

git merge

Answer 3

@Fabian Schultz＆＃39;答案很有效，这是flexbox的另一个解决方案：

它使每个.menu-title成为一个弹性箱容器（display: flex}）并通过给span

将margin-left: auto移到右侧

注意：我不知道＆＃34; sn＆＃34;代表，但我想这应该在跨度内。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

正如@johannes所说，flexbox是解决这个问题的另一种方法，它是我的首选路线，因为它的使用效率更高。

如果需要，请阅读有关Flexbox here

的更多信息

另外，由于我不知道' sn '是什么，我已经将它附加到价格上，就像它是货币一样。

请参阅下面的解决方案：

请注意：' sn '已从' li '标记中删除，因为它们是通过CSS动态添加的 p>

<强> 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

上的演示

希望这有用。

如何将span文本排成一行

4 个答案: