Как избавиться от частичного переноса элементов списка на следующую строку?

Question

[Сергей Кирьянов]

<ul class="hr">
  <li>1 серия</li>
  <li>2 серия</li>
  <li>3 серия</li>
  <li>4 серия</li>
  <li>5 серия</li>
  <li>6 серия</li>
  <li>7 серия</li>
  <li>8 серия</li>
  <li>9 серия</li>
  <li>10 серия</li>
  <li>11 серия</li>
  <li>12 серия</li>
  <li>13 серия</li>
  <li>14 серия</li>
  <li>15 серия</li>
  <li>16 серия</li>
  <li>17 серия</li>
  <li>18 серия</li>
  <li>19 серия</li>
  <li>20 серия</li>
  <li>21 серия</li>
</ul>

ul.hr {
    margin: 0;
    padding: 4px; 
   }
ul.hr li {
    display: inline;
    margin-right: 5px;
    border: 1px solid #000;
    padding: 3px;
   }

Имею такой вывод:


Как сделать, чтобы не было разрывов на следующую строку (как 8 серия и 21)?

Answer 1

[Даниил Маслов]

Comments

[Сергей Кирьянов]

Лучший

Answer 2

[0xD34F]

display: inline-block; или white-space: nowrap; для li