Question

I’m trying to position two elements within an li list next to eachother on the right side to get the result:
Some text……………..A…B

Unfortunatelly the ordering drives me crazy.

Here’s the html code:

<ul class="list">
<li>some text 
     <small class="a">A</small>
     <small class="b">B</small>
</li>
</ul>

With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!

.list li{
    background-color:#282828;
    color:#ffffff;
    font-size:20px;
    text-transform:uppercase;
    padding-left:5px;
 }


 .list small.a {
    display:inline;
    float:right;
 }


 .list small.b {
    display:inline;
    float:right;
 }

So, I aim to have:
some tex…………………A…B

but for instance it looks like:
some text………………..B…A

See example here –> http://jsfiddle.net/LKVdE/

Thanks upfront for any tip!

Answer 1

Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/

CSS

.list small.a {
    background-color: #000000;
    display: inline;
}
.list small.b {
    background-color: #ff0000;
    display: inline;
}
.list li span{
    display: inline-block;
    float: right;
}

HTML

<ul class="list">
     <li>Brennwert kJ / kcal
         <span>
            <small class="a">1109kJ / 261kcal</small>
            <small class="b">455kJ / 107kcal</small>
         </span>
     </li>
</ul>

​