将子元素定位在基线处并在列表 (`<li>`) 项中右对齐

Question

我希望咖啡的价格出现在咖啡名称的右端，即 1.80 的价格应该与 Americano 一致。同样，10.00 的价格应该与 Macchiato 一致。

ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}
ul#container {
  width: 18%;
  min-width: 100px;
  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;
}
span {
  width: 100px;
  display: inline-block;
}

<ul id="container">
  <li>DRINK MENU
  <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>1.80</em>
    </li>
    <li><span>Espresso</span><em>2.00</em>
    </li>
    <li><span>Carmel Macchiato</span><em>10.00</em>
    </li>
  </ul>
</li>
</ul>

如您所见，我使用的是相对位置，但它不起作用。你能在没有绝对位置和对代码进行最少更改的情况下解决这个问题吗？
告诉我为什么相对位置不起作用。

Answer 1

您可以在 <em>

中添加一个 class

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>

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

DEMO

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

CSS:

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

DEMO

Answer 2

首先你需要修复你的 html - DRINK MENU 的结束 li 应该在嵌套的 ul.

之后

那我就用display:table css:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul#container {
  width: 18%;
  min-width: 100px;
  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 {
  padding: 5px;
}
#container ul {
  border-top: 1px solid black;
  margin-top: 5px;
}
#container ul li {
  border-bottom: 1px dashed blue;
  display: table;
  width: 100%;
}
#container span,
#container em {
  display: table-cell;
  vertical-align: bottom;
  padding: 3px 0;
}
#container em {
  text-align: right;
}

<ul id="container">
  <li>DRINK MENU
    <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>1.80</em>
      </li>
      <li><span>Espresso</span><em>2.00</em>
      </li>
      <li><span>Carmel Macchiato</span><em>10.00</em>
      </li>
    </ul>
  </li>
</ul>

更新

根据您对溢出的评论。有几种方法可以解决此问题：

将 ul#container 的最小宽度增加到可以容纳最长行的宽度 - 在这种情况下，125px 的宽度就足够了：Fiddle example
将 table-layout:fixed 添加到您的 table li 并将 word-wrap:break-word 添加到 span：Fiddle example

Answer 3

除了您的问题，我在准备此答案时还考虑了您的意见。

首先，您的 HTML 无效。该列表是 nested improperly，所以我在回答中更正了这一点。

回答你的第一个问题...

how to position the prices at the baseline

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

请注意，要使 position: absolute 正常工作，您必须将父元素设置为 position: relative。这是因为绝对定位会移动元素——在本例中是 em – 相对于其最近定位的祖先 （在本例中应该是 li） .如果绝对定位的元素找不到定位的祖先，它将相对于 <body> 定位元素。所以底线：

要绝对定位子元素，请将父元素设置为 position: relative。

这是一个使用您的代码的示例。

DEMO

HTML

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

/* based on your original code */

#container {
  width: 200px;
  border: 15px solid #886633;
  background-color: orange;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
   padding: 5px;
}
h2 {
  width: 99%;
  border-bottom: 1px solid black;
  margin: 0;
}
ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}
#container ul li {
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px dashed blue;
    position: relative;
}
span {
  width: 100px;
  display: inline-block;
}
em {
  position: absolute;
  bottom: 0;
  right: 0;
}

回答你的第二个问题...

Just tell me why is relative position not working.

实际上，它运行良好。在 normal flow 的事物中，它恰好位于它所属的位置。由于您在 span 中设置的边距限制，您的描述将换行。

也就是说，em 仍然可以用 position: relative 定位。将值从 0 更改。您的价格将（根据您的样式规则定义）作为一个整体向上或向下移动，具体取决于您使用的是正数还是负数。

您的 CSS 规则：

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

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

有关定位的更多信息，请参阅 position article at MDN。

将子元素定位在基线处并在列表 (`<li>`) 项中右对齐

Position child element at baseline and flush right within list (`<li>`) item

html

css

position