无样式列表将文本放在下一行。 如何阻止这个？

Question

I'm about to build a simple menu card with bootstrap. I'm not a dev pro so I've decided to list them with unstyled list. I also defined span with float: right that the price is always right aligned. Problem now is that when I resize my browser to view output for different devices, the price drops into the next row when the column is too tight. How to avoid this?

<ul class="list-unstyled">
                <li>rashcook omlette +khobz*<span><u>8.5€</u></span></li>
                <li style="padding-left: 10px;">+rinderschinken<span><u>3.5€</u></span></li>
                <li style="padding-left: 10px;">+avocado-minze<span><u>3€</u></span></li>
                <li style="padding-left: 10px;">+tomaten-salsa<span><u>2.5€</u></span></li>
              </ul>

Answer 1

You can define behavior for different screen sizes with bootstrap using sm , md , lg , xl and xxl .
To cause a newline in this case, you can force the <u> element to display as block instead of inline on screens smaller than sm (576px by default).

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <div style="width: 300px"> <ul class="list-unstyled"> <li>rashcook omlette +khobz*<u class="d-block d-sm-inline float-sm-end">8.5€</u></li> <li class="ps-2">+rinderschinken<u class="d-block d-sm-inline float-sm-end">3.5€</u></li> <li class="ps-2">+avocado-minze<u class="d-block d-sm-inline float-sm-end">3€</u></li> <li class="ps-2">+tomaten-salsa<u class="d-block d-sm-inline float-sm-end">2.5€</u></li> </ul> </div>

I replaced the padding by 0.5rem (8px) with the class ps-2 .

Answer 2

 <ul class="list-unstyled"> <li style="padding-left: 10px;">rashcook omlette +khobz*<span><u>8.5€</u></span></li> <li style="padding-left: 10px;">+rinderschinken<span><u>3.5€</u></span></li> <li style="padding-left: 10px;">+avocado-minze<span><u>3€</u></span></li> <li style="padding-left: 10px;">+tomaten-salsa<span><u>2.5€</u></span></li> </ul>

can you try like this? If not, I suggest you look at bootstrap grid.