Теги span и ul,li на одной линии

Question

Добрый день! У меня список номеров страниц. Который выглядит как на картинке сверху. Нужно чтобы стрелки налево\направо были на одной линии с цифрами. display:inline-block пробовола не помогло

          <div class="page">
            <div class="paginate">
              <span class="icons">chevron_left</span>
              <ul>
                <li v-for="(item, index) in numbers" :key="item+'page'">{{index+1}}</li>
              </ul>
              <span class="icons">chevron_right</span>
            </div>
          </div>

CSS

.paginate{
  display: inline-block;
  max-width: 250px;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
  }
  li{
    color: #264348;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    // border: 1px solid #d2d7d3;
    margin: 0 3px;
    display: flex;
    cursor: pointer;
  }
  span{
    cursor: pointer;
  }
}

Answer 1

    .icons {
    display:block;
    float:left;
    }
    .paginate ul li {
    float:left;
    margin-right:10px;
    list-style:none;
    }

    <div class="page">
    <div class="paginate">
    <span class="icons"><</span>
    <ul>
    <li v-for="(item, index) in numbers" :key="item+'page'">1</li>
    <li v-for="(item, index) in numbers" :key="item+'page'">2</li>
    <li v-for="(item, index) in numbers" :key="item+'page'">3</li>
    <li v-for="(item, index) in numbers" :key="item+'page'">4</li>
    </ul>
    <span class="icons">></span>
    </div>
    </div>

Answer 2

display: flex;

display: inline-flex;

И ещё white-space: nowrap или убрать max-width для .paginate.

А float внутри flex не работает.

.paginate {
  display: inline-block;
}

.paginate ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  overflow: hidden;
}

.paginate li {
  color: #264348;
  padding: 8px 16px;
  text-decoration: none;
  margin: 0 3px;
  display: flex;
  cursor: pointer;
}

.paginate span {
  cursor: pointer;
}

<div class="page">
  <div class="paginate">
    <span class="icons">chevron_left</span>
    <ul>
      <li v-for="(item, index) in numbers" :key="item+'page'">1</li>
      <li v-for="(item, index) in numbers" :key="item+'page'">2</li>
      <li v-for="(item, index) in numbers" :key="item+'page'">3</li>
      <li v-for="(item, index) in numbers" :key="item+'page'">4</li>
      <li v-for="(item, index) in numbers" :key="item+'page'">5</li>
    </ul>
    <span class="icons">chevron_right</span>
  </div>
</div>

БЛОГ НА HUSL

Теги span и ul,li на одной линии

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