我如何自定义这样的按钮..？

Question

我在 Figma 上设计的图像：

我的尝试：

.pagenumber {
  display: flex;
  width: 252.27px;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  padding: 6.761954261954262% 0 0 37.680647534952171%;
}

button {
  background: none;
  border: none;
}

.no {
  width: 65.750981091687478%;
  padding: 0 12px 0 22.5px;
}

.numbers {
  background: #ffe400;
  border-radius: 50%;
  height: 45px;
  width: 45.24px;
}

.no a {
  color: black;
  font-family: Lobster;
  font-size: 187.5%;
}

<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

我想要一个像这张图片一样的页码按钮，但我不知道如何在 1、2、3 按钮之间制作 space。按钮之间的 space 是 15.08px。如果您从我的代码中发现一些缺点，请通知我。

Answer 1

<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

<style>
  .pagenumber {
    display: flex;
    width: 252.27px;
    height: 45px;
    justify-content: space-between;
    align-items: center;
    padding: 6.761954261954262% 0 0 37.680647534952171%;
  }
  
  button {
    background: none;
    border: none;
  }
  
  .no {
    padding: 0 12px 0 22.5px;
  }
  
  .numbers {
    background: #ffe400;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    margin-right: 15.08px;
  }

  .no :nth-last-child(1) {
    margin-right: 0px;
  }
  
  .no a {
    color: black;
    font-family: Lobster;
    font-size: 187.5%;
  }
</style>

删除 no 上的宽度并在 numbers 上设置 margin-right 即可。

Answer 2

您好，要在您的数字按钮之间获得 space，您只需要在您的数字上应用边距，例如 margin: 0 5px 或其他内容 class 如果您想删除数字按钮上的行应用文本装饰：none 在锚标签

那样...

<style type="text/css">
    .pagenumber {
      /*display: flex;*/
      /*width: 252.27px;*/
      height: 45px;
      justify-content: space-between;
      align-items: center;
      padding: 6.761954261954262% 0 0 37.680647534952171%;
    }

    button {
      background: none;
      border: none;
    }

    .no {
      width: 65.750981091687478%;
      padding: 0 12px 0 22.5px;
    }

    .numbers {
      background: #ffe400;
      border-radius: 50%;
      height: 45px;
      width: 45.24px;
          margin: 0 5px;
    }

    .no a {
      color: black;
      font-family: Lobster;
      font-size: 187.5%;
      text-decoration: none;
      font-weight: bold;
    }
</style>
<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class=""><a href=""><</a></button>
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
    <button class=""><a href="">></a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

Answer 3

尝试将 flex 属性添加到您的 .no class 并更新宽度。

如果您只是想要一种简单的方法来获得元素之间的间距，只需设置所需的 width 而无需使用 calc 和 space-between 将完成剩下的工作。

如果您希望获得您想要的确切间距，那么我建议使用 calc 来计算父元素的宽度应该是多少以适合您所需的间距。

我的计算说明：

乘以3个数字元素的宽度(45.24px * 3)
将其添加到数字元素之间所需的精确间距的乘积 (15.08px * 2)，在本例中，将所需间距乘以 2，因为你有 3元素之间只需要 2 spaces。

请注意，如果您使用 calc 方法，则每次更新要显示的元素数时都必须更新计算。

.pagenumber {
  display: flex;
  width: 252.27px;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  padding: 6.761954261954262% 0 0 37.680647534952171%;
}

button {
  background: none;
  border: none;
}

.no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(45.24px * 3 + 15.08px * 2);
  padding: 0 12px;
}

.numbers {
  background: #ffe400;
  border-radius: 50%;
  height: 45px;
  width: 45.24px;
}

.no a {
  color: black;
  font-family: Lobster;
  font-size: 187.5%;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="pagenumber">

  <div class="arrowbtn">
    <button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
  </div>

  <div class="no">
    <button class="numbers"><a href="">1</a></button>
    <button class="numbers"><a href="">2</a></button>
    <button class="numbers"><a href="">3</a></button>
  </div>

  <div class="arrowbtn">
    <button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
  </div>

</div>

Answer 4

你的意思是这样的吗？

button {background: yellow; border-radius:50%}

<button>1</button>
<button>2</button>
<button>3</button>

我如何自定义这样的按钮..？

how can i customize button like this..?

css

button