Hiding a part of a list

[Pocokos]

Hii :)

I have a list which is presented on one line so I am using css 'float: left' to do this. In one list there is 3 entries. It should look like this

<ol>
    <li> 1 </li>
    <li> text </li> 
    <li> 1.30 </li>
</ol

However the way it is layed out for me, it means that the middle entry doesnt fit properly so what I have done is set the overflow property to hidden and when hovered over it would show the full name. However when I hover over the text then is below the 3rd entry.

Is there a way to hide the 3rd entry when hovering over the second?

Thank youuu :)

[Dani]

The three list items don't all fit together on the same line. The third item is being wrapped around to the next line. If you do white-space: nowrap; that should fix the problem. Another idea is to use CSS flex boxes instead of float: left but that's a whole different thing. Try using the white-space property to tell it not to wrap to the next line and let me know if that fixes your problem.

[Pocokos]

So this is what the list looks like in general:

and when hovered over:

I need the number on the right to disappear when hovering over but I dont know how..

[Dani]

Try something like the following:

div.pink-box
{
    background-color: pink;
}

div.pink-box .text
{
    float: left;
}

div.pink-box .number
{
    float: right;
}

div.pink-box:hover .number
{
    display: none;
}

Of course, add all your other CSS properties as well.