ブロック要素内のテキストの位置

Question

テキスト行が長すぎる場合は、価格を上回らず、価格でブロックに近づくとすぐに2行目に移動することを確認する必要があります。私はこれが理にかなってほしい。 「レモンの小片で緑茶」の行を参照してください。 'of'という言葉が行の上にならないようにするには、2行目に移動したはずです。

これを修正する方法はありますか？

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

Answer 1

変更し、あなたのHTMLの構造を少しとあなたの<a>がdisplay: flexにdisplay: blockから、すなわちフレキシボックスに変更されます。

.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; 
 
    padding: 5px; 
 
    position: relative; 
 
    border-bottom: 2px solid #f3f2e8; 
 
    z-index: 2; 
 
} 
 

 
ul.lst li a .text { 
 
    flex: 1; 
 
} 
 

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

・ホープ、このことができます：

は、以下のスニペットを見てください！

Answer 2

あなたは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>

Answer 3

それはどのように価格に行かないように？このような何か：

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