Prevent line breaks with CSS

— css trick in a React component🧚

As long as the road is right, you are not afraid of the road far — 只要路是对的，就不怕路远

Recently I encountered an interesting problem, let’s say, there are some list items to display using the basic React code like below 👇

a very simple <ul><li> …

✨ Notice those items should be side by side ( inline and of course without any line breaks ) like the result below👇

responsive lists view

I wrote some simple css: ✏️

I want that the items are side by side 👉display: inline

And the Result was 💥

Ops, line breaks 🙅‍♀️

See the line breaks? Ugly enough…

🤞 Here comes my simple solution: