时间戳

首页 > 解决方案 > 无样式列表将文本放在下一行。如何阻止这个？

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

问题描述

我即将用引导程序构建一个简单的菜单卡。我不是开发专家，所以我决定用无样式列表列出它们。我还用 float:right 定义了跨度，即价格总是右对齐。现在的问题是，当我调整浏览器的大小以查看不同设备的输出时，当列太紧时价格会下降到下一行。如何避免这种情况？

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

在此处输入图像描述

标签： htmllistbootstrap-5

解决方案

sm您可以使用、md、lg和引导程序定义不同屏幕尺寸的xl行为xxl。
要在这种情况下产生换行符，您可以强制<u>元素显示为block而不是inline在小于sm（默认为 576 像素）的屏幕上显示。

<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€&lt;/u></li>
    <li class="ps-2">+rinderschinken<u class="d-block d-sm-inline float-sm-end">3.5€&lt;/u></li>
    <li class="ps-2">+avocado-minze<u class="d-block d-sm-inline float-sm-end">3€&lt;/u></li>
    <li class="ps-2">+tomaten-salsa<u class="d-block d-sm-inline float-sm-end">2.5€&lt;/u></li>
  </ul>
</div>

我用类替换了0.5rem(8px)填充ps-2。

推荐阅读