一块 <li> 向左浮动，另一块相同的 <li> 向右浮动答案

<div class="row col-5"> <ul> <li class="open-sans green-dot">Stokbrood 1</li> <li class="open-sans green-dot">Zwarte Olijven 30 gram</li> <li class="open-sans green-dot">Makreel in Blik 150 gram</li> </ul> </div>

【解决方案1】：

嘿，很明显，一种方法是编写某种自定义脚本，添加跨度或执行正则表达式来检查数字。

如果所有数据都在，你可以做这样的事情 - https://jsfiddle.net/qrbtkz5g/

<div class="row col-5">
<ul>
    <li class="open-sans green-dot"><div class="recipe-name">Stokbrood</div> <div class="recipe-amount">1</div></li>
        <li class="open-sans green-dot"><div class="recipe-name">Zwarte Olijven</div> <div class="recipe-amount">30 gram</div></li>
        <li class="open-sans green-dot"><div class="recipe-name">Makreel in Blik</div> <div class="recipe-amount">150 gram</div></li>
    </ul>
</div>

CSS：

li.open-sans {width:100%;float:left;text-align:left;margin;}
li > div.recipe-name {display:inline-block;}
li > div.recipe-amount {display:inline-block;float:right;}

这会添加两个 div 类，一个在左侧，另一个在右侧。

如果您在某种 CMS 中执行此操作，您可以采用一种 hack 方式 - https://jsfiddle.net/mjnLk0L1/

<div class="row col-5">
    <ul>
    <li class="open-sans green-dot"><h6>Stokbrood</h6><p>1</p></li>
        <li class="open-sans green-dot"><h6>Zwarte Olijven</h6><p>30 gram</p></li>
        <li class="open-sans green-dot"><h6>Makreel in Blik</h6> <p>150 gram</p></li>
    </ul>
</div>

CSS：

li.open-sans {width:100%;float:left;text-align:left;margin;}
li > h6 {display:inline-block;}
li > p {display:inline-block;float:right;}

这与上面的第一个示例执行相同的操作，但它使用 p 和 h6 标记（您可以使用在管理面板中对非编码人员很容易访问的任何类似内容），然后将它们适当地对齐。如果你想让它们看起来一样，你可以添加 CSS，使它们具有相同的字体大小等。

【讨论】：

这些例子很棒！如果有可能，我会联系后端。非常感谢您的帮助！
没问题！关键是两个元素之间总是有一个数字分开，所以后端可能有某种正则表达式脚本；这可能是要走的路。不确定您使用的是什么框架或有多少后端工作是一个选项。祝你好运！