我需要确保如果文本行太长,它不会超出价格,而是在接近价格 block 时立即转到第二行。我希望这是有道理的。请参阅“绿茶加一小片柠檬”这一行。 “of”一词不应超出该行,它应该移至第二行。
有什么想法可以解决这个问题吗?
.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;
}
<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>
最佳答案
您可以在 a
上设置 display: flex
,这应该可以解决问题。
.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;
}
<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>
关于html - block 元素中文本的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40935297/