主页 / 问题 / 1403437
Accepted
g_0008
Asked:2022-06-24 21:55:20 +0800 CST2022-06-24 21:55:20 +0800 CST

span 和 ul,li 标签在同一行

  • 772

在此处输入图像描述

下午好！我有一个页码列表。看起来像上面的图片。左/右箭头必须与数字在同一行。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;
  }
}
html

0 个回答

  1. Best Answer

        .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>

    • 1

相关问题