html - aligning - from left to right within the same row -

html - aligning <li> from left to right within the same row -

i want create 7 3 grid. right not know how create 3 blocks align next each other. css confusing me because sense there ways same thing. looked around other examples , think display: inline-block; supposed me can't seem work.

my html:

<ul class=""> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> ... 6 more time </ul>

i want <li> within <ul class="inner"> align left right dont know how so.

there's no valid css property of border: inline-block;, utilize display: inline-block on .inner li.

class="snippet-code-css lang-css prettyprint-override">ul.inner li { display: inline-block; } class="snippet-code-html lang-html prettyprint-override"><ul class=""> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li class=""> <ul class="inner"> <li>1</li> <li>2</li> <li>3</li> </ul> </li> </ul>

html css