Dominic Dominic - 6 months ago 10
CSS Question

Float 2 elements next to eachother

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!

SVS SVS
Answer

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>

‚Äč

Comments