我的當前代碼顯示:

我嘗試將它更改如下:

列表中的每一行都應該適合對應的框，為此我使用了vertical-align: top。 移動40千卡和30千卡到盒子的最右邊，為此我使用了文本對齊:右。 然而，我似乎無法讓這兩種改變奏效。

<template>
  <h3> Foods: </h3>
  <ul class="food-list">
    <li class="food-item">
      <p class="left">Banana &nbsp;</p>
      <p class="right">40 kcal</p>
    </li>
    <li class="food-item">
      <p class="left">Strawberry &nbsp;</p>
      <p class="right">30 kcal</p>
    </li>
  </ul>
</template>

<style scoped>
.food-list {
  width: 300px;
}

.food-item {
  height: 30px;
  width: 300px;
  display: inline-block;
  margin: -10px;
  border: solid 1px black;
}

.left {
  text-align: left;
  display: inline-block;
  vertical-align: top;
}

.right {
  text-align: right;
  display: inline-block;
  vertical-align: top;
}
</style>

萬一是相關的，我用Vue + VueCLI。

左類和右類不需要單獨的css。可以使用display:flex；justify-content:space-around；食品類，它會為你做的。我也不明白的差距:-10px在那里。