Как элементы списка расположить в одну строку без переноса?

Question

Необходимо чтобы все элементы списка всегда были на одной строке и при необходимости добавлялся скрол

html:

    <ul class="list">
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
    </ul>
 </div>

css:

.box {
    width: 300px;
    height: 150px;
    border: 2px solid black;
    overflow: auto;
}

.list-item {
    display: inline;
}

Answer 1

Используйте white-space: nowrap - это свойство запрещает перенос inline и inline-block элементов

.box {
    width: 300px;
    height: 150px;
    border: 2px solid black;
    overflow: auto;
}

.list{
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.list-item {
    display: inline;
}

<div class="box">
    <ul class="list">
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
        <li class="list-item">hello world</li>
    </ul>
 </div>

БЛОГ НА HUSL

Как элементы списка расположить в одну строку без переноса?

Ответы (1 шт):