Question

我希望咖啡的价格出现在咖啡名称的右端，即1.80的价格应符合Americano的要求。同样10.00的价格应该与玛奇朵一致。

＆＃13;

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

＆＃13;

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

＆＃13;

正如你所看到的，我正在使用相对位置，但它不起作用。如果没有绝对的位置和最小的代码更改，你能解决这个问题吗？ 告诉我为什么相对位置不起作用。

Answer 1

首先你需要修复你的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添加到您的表格li并将word-wrap:break-word添加到span：Fiddle example

Answer 2

您可以在<em>

中添加课程

<强> 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 3

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

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

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

如何将价格定位在基线

...绝对定位将起作用，不会阻止您的价目表适应不同的浏览器，平台或设备。它将像容器一样具有响应性。当然，您应该测试代码以确保它按预期工作。

请注意，要使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;
}

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

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

实际上，它运作正常。在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>`）项目中向右刷新

3 个答案: