CODEWITHSUNDEEP
jqueryhtmlcss
Bayron2304
Bayron2304

Reputation: 113

One piece of <li> float left and another piece of same <li> float right

I wouldn't know what the best title for my problem would be, but I'll try to explain.

I've received this design from someone in which 1 piece of text from a list tag is on the left and another piece of text from the same list tag is on the right.

Image of the design below:

enter image description here

Now this has to be one tag! I can't split it up into 2 list tags and float one left and the other right. It's a recipe system so the text has to be dynamic and can be edited in an admin portal.

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

How do I manage to do this so it's dynamic no matter the input of the text?

Upvotes: 1

Views: 80

Answers (1)

Joel M.
Joel M.

Reputation: 737

Hey so obviously one way to do this would be to write some kind of custom script that adds span or does regex to check for numbers.

If all the data were in, you could do something like this - 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;}

This adds two div classes, one to the part on the left, and another to the part on the right.

If you were doing this in some kind of CMS you could do a hack kind of way - 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;}

This does the same thing as the first example above, but it uses p and h6 tags (you could use anything similar that's easily accessible in the admin panel to a non-coder) and then it aligns them appropriately. If you wanted them to look the same you could add CSS so they had the same font-size, etc.

Upvotes: 2

Related Questions