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 :)

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.

commented: Thank you but I have already applied white-space: no wrap, I have attached some screenshots, that might better explain it better than I did :D +0

So this is what the list looks like in general:

normal.png

and when hovered over:

hovered.png

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.