网站URL:https://anthonysavarese.com/my-photos/
堆叠按钮的图像
嗨,我如何防止上面链接中的按钮堆积在手机上?我想让它们居中对齐并在同一行。
我试着添加我在网上找到的不同的CSS代码,但都没有解决。我还试着将HTML标记从div调整到其他选项,但没有成功。
display: flex
是您的最佳选择。但是您也可以使用display grid
作为一个选项。下面是一个使用display flex的片段。
@media (max-width:768px) {
.gutentor-element-button-group-wrap {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom:30px;
}
}
将768px
断点调整为希望触发移动视图的时间。
margin-bottom:30px
是可选的。我添加它是为了在底部给你一些空间。
如果你想了解更多关于display flex的信息,这里有一个更深入的逻辑https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout