Html 将子元素放置在基线处，并在列表（`<；li>；`）项中向右刷新

我希望咖啡的价格在咖啡名称的右端，即1.80的价格应与Americano一致。同样，10.00美元的价格应该与马基雅托的价格一致

ul{
列表样式：无；
填充物：5px；
保证金：0；
}
ul#集装箱{
宽度：18%；
最小宽度：100px；
最大宽度：400px；
边框：15px实心#886633；
边界半径：5px；
背景颜色：橙色；
盒影：4px4px8pxRGBA（0,0,0,3）；
}
#集装箱李{
边框底部：1px蓝色虚线；
}
#集装箱>李{
字号：2em；
边框底部：1px纯黑；
}
em{
浮动：对；
位置：相对位置；
底部：0px；
}
跨度{
宽度：100px；
显示：内联块；
}

饮料菜单

拿铁2.79

卡普西诺2.99

美式咖啡1.80

浓缩咖啡2.00

卡梅尔马基亚10.00

您可以将类添加到

HTML

<ul id="container">
<li>DRINK MENU</li>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
    </ul>
</ul>

<!-- with corrections to improperly nested list -->
<div id="container">
    <h2>DRINK MENU</h2>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano more text more text more text more text</span>
        <em>1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato more text more text more text more text</span>
        <em>10.00</em></li>
     </ul>
</div>

另一个可行的解决方案（可能是最佳实践）：

CSS:

ul{ 
    list-style: none;
    padding: 5px;
    margin: 0;
    }
ul#container{
    width: 18%;
    min-width: 200px ;
    max-width: 400px;
    border: 15px solid #886633;
    border-radius: 5px;
    background-color: orange ;
    box-shadow: 4px 4px 8px rgba(0,0,0,.3);
    }
#container  li{
    border-bottom: 1px dashed blue;
    }
#container > li{
    font-size: 2em;
    border-bottom: 1px solid black;
    }
em{
    float: right;
    position: relative;
    bottom: 0px;
    }
.bottom {
    position: relative;
    top:15px;
}
span{
    width: 100px;
    display: inline-block ;
    }

li:nth-child(3) > em, li:nth-child(5) > em{
    position: relative;
    top:16px;
}

---

首先，您需要修复html-饮料菜单的结尾应该在嵌套的

ul

之后

然后我会使用

display:table

css:

ul{
列表样式：无；
填充：0；
保证金：0；
}
ul#集装箱{
宽度：18%；
最小宽度：100px；
最大宽度：400px；
边框：15px实心#886633；
边界半径：5px；
背景颜色：橙色；
盒影：4px4px8pxRGBA（0,0,0,3）；
}
#集装箱>李{
填充物：5px；
}
#集装箱保险{
边框顶部：1件纯黑；
边缘顶部：5px；
}
#集装箱保险箱{
边框底部：1px蓝色虚线；
显示：表格；
宽度：100%；
}
#集装箱跨度，
#容器em{
显示：表格单元格；
垂直对齐：底部对齐；
填充：3px0；
}
#容器em{
文本对齐：右对齐；
}

饮料菜单

拿铁2.79

卡普西诺2.99

美式咖啡1.80

浓缩咖啡2.00

卡梅尔马基亚10.00

在准备此答案时，我已经考虑了您的意见以及您的问题

首先，你的HTML是无效的。我在回答中纠正了这个问题

在回答您的第一个问题时…

如何定位基准价格

。。。绝对定位将起作用，不会阻止您的价格卡适应不同的浏览器、平台或设备。它将像它所在的容器一样灵敏。当然，您应该测试您的代码，以确保其按预期工作

请注意，要使

position:absolute

正常工作，必须将父元素设置为

position:relative

。这是因为绝对定位将移动元素–在本例中为

em

–相对于其最近定位的祖先（在本例中应为

li

）。如果绝对定位元素没有找到定位的祖先，它将相对于

定位元素。因此，底线是：

要绝对定位子元素，请将父元素设置为

position:relative

下面是一个使用您的代码的示例

HTML

<ul id="container">
<li>DRINK MENU</li>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
    </ul>
</ul>

<!-- with corrections to improperly nested list -->
<div id="container">
    <h2>DRINK MENU</h2>
    <ul>
        <li><span>Latte</span><em>2.79</em></li>
        <li><span>Cappucino</span><em>2.99</em></li>
        <li><span>Cafe Americano more text more text more text more text</span>
        <em>1.80</em></li>
        <li><span>Espresso</span><em>2.00</em></li>
        <li><span>Carmel Macchiato more text more text more text more text</span>
        <em>10.00</em></li>
     </ul>
</div>

在回答第二个问题时…

告诉我为什么相对位置不起作用

实际上，它工作得很好。在所有的事物中，它都被精确地定位在它所属的位置。由于您在

span

中设置的边距限制，您的描述将突破一行

这就是说，

em

仍然可以用

位置：relative

定位。将值从0更改为0。您的价格（根据您的样式规则定义）将作为一个组向上或向下移动，这取决于您使用的是正数还是负数

您的CSS规则：

em {
  float: right;
  position: relative;
  bottom: 0px;

/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}

---

有关定位的更多信息，请参阅。

不使用

定位的任何原因：绝对值
？您的HTML无效。您的内部
ul
嵌套不正确。您的代码在Chrome中呈现良好，但在JSFIDLE中呈现混乱。考虑清理第一个.@ Loo.fcx绝对位置从流中移除元素，我正在做出一个响应性的网页设计。它需要根据窗口大小进行调整。@VarunJ，您的价格将绝对位于
容器中，而不是视口中。它将与容器一样灵敏。测试它。@Michael_B它在JSFIDLE中运行良好。勾选此项将解决当前情况，但将来的条目如何？如果咖啡名称转到第三行怎么办。我想知道为什么相对位置不起作用。我添加了另一个解决方案，使用
：n个子项
这个第n个子项更为具体，如果菜单发生变化，并且所讨论的价格不再在同一行怎么办。我正在寻找一些“防弹”的东西，我只回答了这个问题，并找到了解决你当前问题的方法。@Pete的答案可能适用于您的“未来”情况，使用
显示表
使此
成为“防弹”。）谢谢你的回复。我感谢你的贡献：）。顺便问一下，如何一对一地聊天？你的答案在JSFIDLE中无法解决。价格太高，与咖啡名称不符。我特意减少了咖啡名的空格，这样它就可以用两行。顺便说一句，关于我的
没有在正确的位置成交，你是对的。请看编辑后的答案，我也对其进行了修改，使价格与底部一致。你用三行代码创造了奇迹。我选择了一个正确的答案。如果你知道为什么相对位置不起作用，那就回答。我认为相对位置，当容器变得太小时，它会