Problem in a Breadcrumb using "Direction: rtl"

Asked

Viewed 41 times

0

I’m having trouble using "Direction: rtl" and I’d like your help. I created a breadcrumb, when it reaches the screen limit size the end of it remains on screen and the beginning is cut. It was the only way I could do it, without using some JS. The problem is that when the first folder level starts with a number, the numbers are played pro final (even if it is the first element).

I created the code on https://jsfiddle.net/andersonmelo/3ge59bLe/4/ so you can take a look. I left in comment a gambit that "solves" the problem, but I would not like to solve in this way... someone can help me?

html css front-end

  • What effect would you like to achieve with this rtl on breadcrumb ? removing line 28 from css it hits, but I don’t know what you’re trying to do.

  • When you say the resize of the area, the end of the breadcrumb remains on screen, and the start is cut (getting "behind" the "Home"). rtl does this inversion.

1 answer

0

The use of float:left; would lose the effect of rtl;

I did the alignment using inline-block and removed the flotation. Apparently it improved.

https://jsfiddle.net/3ge59bLe/5/

  • Is that I actually need the "Home" to stay in front and that folder with number to be in the same order (at the beginning). Apart from the numbers in the first folder it is in the correct form.

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.