Question

我需要确保如果文本行太长，它不会超过价格，但是一旦它以价格接近块，就会转到第二行。我希望这是有道理的。请参考绿茶和一小块柠檬＆＃39;绿茶。＆＃39;＆＃39;不应该超越线，它应该已经移到第二行。

任何想法如何解决这个问题？

＆＃13;

.lst {
  font-family: montserrat;
  width: 300px;
  list-style-type: none;
  position: relative;
}

ul.lst li {
  position: relative;
}

ul.lst li a {
  text-decoration: none;
  color: #252525;
  display: block;
  padding: 5px;
  position: relative;
  border-bottom: 2px solid #f3f2e8;
  z-index: 2;
}

ul.lst li em {
  font-style: normal;
  float: right;
  width: 25%;
  color: orange;
}

ul.lst li span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  text-indent: -9999px;
  background: #BFD3EE;
  opacity: 0.5;
}

ul.lst li:hover span {
  background: #658BBB;
}

ul.lst li:hover a{
  color: #61304B;
}

ul.lst li:hover em{
  color: #61304B;
}

＆＃13;

<ul class="lst">
  <li><a href="#">Americano<em>$2.24</em></a><span style="width:20%">20%</span></li>
  <li><a href="#">Green tea with a tiny piece of lemon<em>$22.50</em></a><span style="width: 50%">50%</span></li>
  <li><a href="#">Black Tea<em>$2</em></a><span style="width: 75%">75%</span></li>
  <li><a href="#">Black coffee<em>$2</em></a><span style="width: 90%">90%</span></li>
  <li><a href="#">Latte<em>$2</em></a><span style="width: 50%">100%</span></li>
</ul>

＆＃13;

Answer 1

您可以在a上设置.lst { font-family: montserrat; width: 300px; list-style-type: none; position: relative; } ul.lst li { position: relative; } ul.lst li a { text-decoration: none; color: #252525; display: flex; align-items: center; padding: 5px; position: relative; border-bottom: 2px solid #f3f2e8; z-index: 2; } ul.lst li em { font-style: normal; margin-left: auto; width: 25%; color: orange; } ul.lst li span { position: absolute; top: 0; left: 0; display: block; height: 100%; text-indent: -9999px; background: #BFD3EE; opacity: 0.5; } ul.lst li:hover span { background: #658BBB; } ul.lst li:hover a { color: #61304B; } ul.lst li:hover em { color: #61304B; }，这样可以解决问题。

＆＃13;

<ul class="lst">
  <li><a href="#">Americano<em>$2.24</em></a><span style="width:20%">20%</span></li>
  <li><a href="#">Green tea with a tiny piece of lemon<em>$22.50</em></a><span style="width: 50%">50%</span></li>
  <li><a href="#">Black Tea<em>$2</em></a><span style="width: 75%">75%</span></li>
  <li><a href="#">Black coffee<em>$2</em></a><span style="width: 90%">90%</span></li>
  <li><a href="#">Latte<em>$2</em></a><span style="width: 50%">100%</span></li>
</ul>

＆＃13;

sed

＆＃13;

Answer 2

绝对位置的价格和链接文本的一些填充怎么样，所以它没有价格？像这样的东西：

ul.lst li a {
    text-decoration: none;
    color: #252525;
    display: block;
    padding: 5px;
    position: relative;
    border-bottom: 2px solid #f3f2e8;
    z-index: 2;
    padding-right: 60px;
}

ul.lst li em {
    font-style: normal;
    float: right;
    color: orange;
    position: absolute;
    right: 0;
    width: auto;
}

文本在块元素中的位置

2 个答案: