Jquery 一件<；李>；向左浮动，另一块相同的<；李>；向右浮动

我不知道我的问题最好的标题是什么，但我会尽力解释

我从某人那里收到过这个设计，其中列表标签中的一条文本位于左侧，同一列表标签中的另一条文本位于右侧

设计图如下：

现在这必须是一个标签！我不能把它分成两个列表标签，一个向左浮动，另一个向右浮动。这是一个配方系统，因此文本必须是动态的，并且可以在管理门户中编辑

我的HTML：

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

Stokbrood 1
Zwarte Olijven 30克
150克

---

我如何做到这一点，使它是动态的，无论文本的输入是什么？

嘿，显然，这样做的一种方法是编写某种自定义脚本，添加span或执行regex来检查数字

如果所有数据都在里面，你可以这样做-

这将添加两个div类，一个到左侧的零件，另一个到右侧的零件

如果你用某种CMS做这件事，你可以用一种黑客的方式-

---

这与上面的第一个示例做了相同的事情，但是它使用了p和h6标记（您可以使用任何类似的，在管理面板中对非编码者容易访问的标记），然后将它们适当地对齐。如果您希望它们看起来一样，您可以添加CSS，使它们具有相同的字体大小等。

如果有任何输入，您会使用哪些标准来表示“此部分向左，此部分向右”？字符数？最后两个词是对的？是的，这就是问题所在（我不知道如何让它工作），我不能使用javascript在某些字符后添加CSS，因为内容是动态的，可以在管理面板中更改。有些列表将包含10个字母（2个单词）和50个字母（5个单词），每次都不同，所以这里的最佳解决方案是什么？您可以使用单空格字体并修改第一个数字和前一个字符之间的空格，以实现所需的对齐。这需要javascript重写“

”元素中的文本。可以吗？这些例子很好！如果可能的话，我会联系后台。非常感谢你的帮助！没问题！关键是两个元素之间总是有一个数字分隔，因此后端可能有某种正则表达式脚本；这可能是最好的办法。不确定您使用的是什么框架，也不确定有多少后端工作可供选择。祝你好运！

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

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

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