如何在div内排布8个方向按钮 无需为每个按钮添加额外div实现定位

不需要为每个按钮单独新增定位用的div，用CSS Grid布局就能直接在#camButtons容器内完成8个方向的排布，还可以进一步优化DOM结构减少冗余标签。

核心实现逻辑 #

把#camButtons容器划分为3行3列的九宫格结构，8个方向按钮刚好对应九宫格除中心外的8个格子，直接给每个按钮设置对应grid-area属性即可完成定位，不需要额外嵌套div。

完整代码示例 #

CSS代码（保留原有逻辑，新增Grid和其他方向样式） #

/* 原有样式保留 */
.button {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.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);
}

/* 新增其他方向箭头样式 */
.button__arrow--right {
  border-right: 2px solid rgba(127, 0, 255);
  border-top: 2px solid rgba(127, 0, 255);
  transform: translateX(-25%) rotate(45deg);
}
.button__arrow--down {
  border-right: 2px solid rgba(127, 0, 255);
  border-bottom: 2px solid rgba(127, 0, 255);
  transform: translateY(-25%) rotate(45deg);
}
.button__arrow--left {
  border-left: 2px solid rgba(127, 0, 255);
  border-bottom: 2px solid rgba(127, 0, 255);
  transform: translateX(25%) rotate(45deg);
}
.button__arrow--up-left {
  border-left: 2px solid rgba(127, 0, 255);
  border-top: 2px solid rgba(127, 0, 255);
}
.button__arrow--up-right {
  border-right: 2px solid rgba(127, 0, 255);
  border-top: 2px solid rgba(127, 0, 255);
}
.button__arrow--down-left {
  border-left: 2px solid rgba(127, 0, 255);
  border-bottom: 2px solid rgba(127, 0, 255);
}
.button__arrow--down-right {
  border-right: 2px solid rgba(127, 0, 255);
  border-bottom: 2px solid rgba(127, 0, 255);
}

/* Grid布局容器样式，行列尺寸、间距可按需调整 */
#camButtons {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  gap: 8px;
}
/* 给每个方向按钮指定九宫格位置 */
.btn-up { grid-area: 1 / 2; }
.btn-up-right { grid-area: 1 / 3; }
.btn-right { grid-area: 2 / 3; }
.btn-down-right { grid-area: 3 / 3; }
.btn-down { grid-area: 3 / 2; }
.btn-down-left { grid-area: 3 / 1; }
.btn-left { grid-area: 2 / 1; }
.btn-up-left { grid-area: 1 / 1; }

HTML代码（无需额外嵌套定位div） #

<div id="camButtonsParent">
  <div id="camButtons">
    <button class="button btn-up">
      <div class="button__arrow button__arrow--up"></div>
    </button>
    <button class="button btn-up-right">
      <div class="button__arrow button__arrow--up-right"></div>
    </button>
    <button class="button btn-right">
      <div class="button__arrow button__arrow--right"></div>
    </button>
    <button class="button btn-down-right">
      <div class="button__arrow button__arrow--down-right"></div>
    </button>
    <button class="button btn-down">
      <div class="button__arrow button__arrow--down"></div>
    </button>
    <button class="button btn-down-left">
      <div class="button__arrow button__arrow--down-left"></div>
    </button>
    <button class="button btn-left">
      <div class="button__arrow button__arrow--left"></div>
    </button>
    <button class="button btn-up-left">
      <div class="button__arrow button__arrow--up-left"></div>
    </button>
  </div>
</div>

可选进阶优化（进一步减少DOM节点） #

如果想要完全去掉按钮内部的箭头div，可以用CSS伪元素替代：给.button添加::before伪元素来渲染箭头，修改后每个按钮内部不需要任何子节点，HTML可以简化为<button class="button btn-up"></button>，对应调整CSS即可：

.button::before {
  content: '';
  background-color: transparent;
  height: 10px;
  width: 10px;
}
/* 对应方向的箭头样式直接写到伪元素上即可，例如上方向 */
.btn-up::before {
  border-left: 2px solid rgba(127, 0, 255);
  border-top: 2px solid rgba(127, 0, 255);
  transform: translateY(25%) rotate(45deg);
}

内容的提问来源于stack exchange，提问作者Mark t