html - 在 div 中放置按钮

Question

我试图将这 8 个按钮定位在正确的位置（所以左按钮在矩形的左侧，右按钮在右侧等等）。我是否需要为每个按钮设置一个 div，然后将其放置在“camButton”内，还是可以在没有这么多 div 的情况下完成？

.button {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 4px;
}

.button__arrow {
  background-color: transparent;
  height: 10px;
  width: 10px;
}

.button__arrow--up {
  border-left: 2px solid rgba(127, 0, 255);
  border-top: 2px solid rgba(127, 0, 255);
  transform: translateY(25%) rotate(45deg);
}

<div id="camButtonsParent">
  <div id="camButtons">
    <button class="button">
        <div class="button__arrow button__arrow--up"></div>
      </button>
  </div>
</div>

标签： htmlcss

Answer 1

希望这能解决您的问题并帮助您按照需要对齐按钮。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
}

.container button {
  color: white;
  display: grid;
  font-size: 1rem;
  position: relative;
  place-items: center;
  border: 1px solid white;
}

.container button:nth-child(odd) {
  background-color: red;
}

.container button:nth-child(even) {
  background-color: green;
}

<div class="container">
  <button>Top Left</button>
  <button>Top</button>
  <button>Top Right</button>
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
  <button>Bottom Left</button>
  <button>Bottom</button>
  <button>Bottom Right</button>
</div>

创建与SVG图标相同。就像我在评论中提到的那样。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
}

.container button {
  color: white;
  display: grid;
  position: relative;
  place-items: center;
  border: 1px solid white;
}

.container button i {
  font-size: 4rem;
}

.container button:nth-child(1) i,
.container button:nth-child(9) i {
  transform: rotate(315deg);
}

.container button:nth-child(3) i,
.container button:nth-child(7) i {
  transform: rotate(45deg);
}

.container button:nth-child(odd) {
  background-color: red;
}

.container button:nth-child(even) {
  background-color: green;
}

<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>

<div class="container">
  <button>
        <i class='bx bx-chevron-up'></i>
    </button>
  <button>
        <i class='bx bx-chevron-up'></i>
    </button>
  <button>
        <i class='bx bx-chevron-up'></i>
    </button>
  <button>
        <i class='bx bx-chevron-left'></i>
    </button>
  <button>
        <i class='bx bxs-circle'></i>
    </button>
  <button>
        <i class='bx bx-chevron-right'></i>
    </button>
  <button>
        <i class='bx bx-chevron-down'></i>
    </button>
  <button>
        <i class='bx bx-chevron-down'></i>
    </button>
  <button>
        <i class='bx bx-chevron-down'></i>
    </button>
</div>