修复HTML项目符号列表的两处美观问题（Vue+VueCLI环境）

你的两个样式调整未生效的原因及修复方案如下：

问题分析 #

1. vertical-align: top 不生效：.food-item 内的 <p> 标签带有浏览器默认的 margin，导致内容无法贴合框体顶部；仅给子元素设置垂直对齐，未配合父元素布局规则，效果被默认样式抵消。
2. text-align: right 不生效：.right 类元素为 inline-block，但未设置宽度，它的宽度仅包裹自身内容，text-align: right 只是在狭小范围内右对齐，无法贴靠父元素右侧。

修复方案（推荐Flex布局） #

Flex布局能简洁解决这两个问题，无需依赖 inline-block 和复杂对齐属性：

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

<style scoped>
.food-list {
  width: 300px;
  padding: 0; /* 清除ul默认内边距 */
  list-style: none; /* 清除列表默认圆点 */
}

.food-item {
  height: 30px;
  width: 300px;
  display: flex; /* 开启flex布局 */
  align-items: flex-start; /* 内容贴靠顶部，需垂直居中可改为center */
  justify-content: space-between; /* 左右元素自动两端对齐 */
  border: solid 1px black;
  margin: 5px 0; /* 合理设置间距，避免重叠 */
}

.left, .right {
  margin: 0; /* 清除p标签默认margin */
}
</style>

方案说明 #

• .food-item 启用 flex 布局后，align-items: flex-start 直接让内容贴合框体顶部；
• justify-content: space-between 自动让左侧文本靠左、右侧热量靠右，无需额外设置 text-align: right；
• 清除了浏览器默认的列表内边距、圆点以及 <p> 标签的默认 margin，避免样式冲突。

若坚持使用 inline-block 方案，可调整如下：

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

.food-item {
  height: 30px;
  width: 300px;
  display: block; /* 改为block避免inline-block间距问题 */
  border: solid 1px black;
  margin: 5px 0;
  line-height: 30px; /* 通过行高实现垂直对齐 */
}

.left {
  display: inline-block;
  width: calc(100% - 80px); /* 为右侧内容预留宽度 */
  margin: 0;
}

.right {
  display: inline-block;
  width: 70px;
  text-align: right;
  margin: 0;
  vertical-align: top;
}
</style>

内容的提问来源于stack exchange，提问作者Sam