Prevent list from wrapping under inline block?

Question

I am trying to center this list, but when I add inline-block, it wraps. So how can I make this list not wrap and display vertically in a single line? White-space: nowrap doesn't seem to work, and I am all out of other ideas to try to fix it.

 .mobile-nav { background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 0; bottom: 0; left: 0; width: 4rem; border-style: solid; border-right-width: 1px; border-color: rgba(243, 244, 246, 1.0); z-index: 10; background-color: lightgray; }.nav { background-color: lightblue; }.nav li { display: inline-block; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transform: scale(-1); margin-bottom: 50px; font-weight: 600; font-size: 0.85rem; background-color: coral; white-space: nowrap }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <!-- left side container --> <div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav"> <!-- left side container content --> <div class="fixed bottom-16 left-0 w-16 select-none"> <!-- navigation --> <nav class="nav block w-full text-center"> <ul> <li> <a href="#">Test 1</a> </li> <li> <a href="#">Test 2</a> </li> <li> <a href="#">Test 3</a> </li> <li> <a href="#">Test 4</a> </li> <li> <a href="#">Test 5</a> </li> </ul> </nav><!-- end navigation --> </div> </div> <!-- end left side container -->

Answer 1

As already written in the comment, I would actually solve this with flexbox instead. for that you should first remove: nav li { display: inline-block; } nav li { display: inline-block; } This line will be superfluous and might cause issues with a flexbox solution.

To use flexbox we first need to enable it by adding: nav ul { display: flex; } nav ul { display: flex; }

To have the the list-items below each other instead of next to each other, we need to add: nav ul { flex-direction: column-reverse; } nav ul { flex-direction: column-reverse; } . flex-direction determines in which direction the items will be aligned to each other. as we want them to be below each other we use column .

last but not least we need to add: nav ul { justify-content: center; } nav ul { justify-content: center; } . This line will center the element at the vertical center. Which is the actual thing you aimed for.

 .mobile-nav { background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 0; bottom: 0; left: 0; width: 4rem; border-style: solid; border-right-width: 1px; border-color: rgba(243, 244, 246, 1.0); z-index: 10; background-color: lightgray; } nav { background-color: lightblue; } nav ul { display: flex; flex-direction: column; justify-content: center; } nav li { text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transform: scale(-1); margin-bottom: 50px; font-weight: 600; font-size: 0.85rem; background-color: coral; white-space: nowrap }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <!-- left side container --> <div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav"> <!-- left side container content --> <div class="fixed bottom-16 left-0 w-16 select-none"> <!-- navigation --> <nav class="nav block w-full text-center"> <ul> <li> <a href="#">Test 1</a> </li> <li> <a href="#">Test 2</a> </li> <li> <a href="#">Test 3</a> </li> <li> <a href="#">Test 4</a> </li> <li> <a href="#">Test 5</a> </li> </ul> </nav> <!-- end navigation --> </div> </div> <!-- end left side container -->

Answer 2

now it s all vertical

 .mobile-nav { background-color: rgba(255, 255, 255, 0.9); position: fixed; top: 0; bottom: 0; left: 0; width: 4rem; border-style: solid; border-right-width: 1px; border-color: rgba(243, 244, 246, 1.0); z-index: 10; background-color: lightgray; }.nav { background-color: lightblue; }.nav li { display: inline-block; text-transform: uppercase; writing-mode: vertical-rl; text-orientation: mixed; transform: scale(-1); margin-bottom: 50px; font-weight: 600; font-size: 0.85rem; background-color: coral; white-space: nowrap }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <!-- left side container --> <div class="fixed top-0 bottom-0 left-0 w-16 border-r border-gray-100 z-10 mobile-nav"> <!-- left side container content --> <div class="fixed bottom-16 left-0 w-16 select-none"> <!-- navigation --> <nav class="nav block w-full h-full text-center flex flex-col justify-center"> <ul class="flex no-wrap flex-col justify-center h-full align-items-center> <li> <a href="#">Test 1</a> </li> <li> <a href="#">Test 2</a> </li> <li> <a href="#">Test 3</a> </li> <li> <a href="#">Test 4</a> </li> <li> <a href="#">Test 5</a> </li> </ul> </nav><!-- end navigation --> </div> </div> <!-- end left side container -->