一块<li>浮动，另一块</li> <li>向右浮动

Question

我不知道问题的最佳标题是什么，但我会尝试解释。

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

以下设计图片：

现在这必须是一个标签！我无法将其拆分为2个列表标签，然后向左浮动，向右浮动。它是一个配方系统，因此文本必须是动态的，并且可以在管理门户中进行编辑。

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

无论文本输入如何，我如何设法做到这一点？

Answer 1

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

如果所有数据都在，你可以这样做 - 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中执行此操作，则可以采用某种方式进行操作 - 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，使它们具有相同的字体大小等。