在div中放置按钮
在div中放置按钮
提问于 2021-08-25 17:57:04
我试图将这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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-25 18:12:50
希望这将解决你的问题，并帮助你对齐你想要的按钮。
* {
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68927773
复制相关文章
相似问题
腾讯云开发者
