breadcrumbs on one line, resizing the page should only hide it, not break it into many lines

Question

I'd like my breadcrumbs to stand on the initial line whatever the page width is, so I thought of this http://fiddle.jshell.net/G6mQb/1/

It does actually exactly what we want, however we can't set the ul width, and without it, it doesn't work. http://fiddle.jshell.net/G6mQb/

Another thing, I was told that no js would be used to solve it.

Any ideas?

Answer 1

If you were using display: inline; or display: inline-block; on the li's, you can use white-space: nowrap to prevent line breaks. I don't see any reason to use floats in this case.

Read about white-space here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

http://fiddle.jshell.net/hb3LJ/