After reviewing my current code, it is displaying the following:
https://i.stack.imgur.com/dvjrc.jpg
I am attempting to make the following changes:
- Ensuring each line in the list fits properly within its corresponding box by utilizing
vertical-align: top. - Shifting the
40 kcaland30 kcalto the right side of the box usingtext-align: right.
However, I am facing difficulty in getting either of these changes to work as intended.
<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;
}
.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>
If it helps, I am working with Vue + VueCLI for this project.