本文介绍了一个使用CSS Flex布局实现水平居中的按钮组的例子。通过具体的HTML和CSS代码展示了如何设置display属性为flex，并且使元素在容器中水平居中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .buttons-row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; -webkit-box-lines: single; -moz-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: none; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .buttons-row .button { width: 100%; margin-left: -1px; color: #0894ec; border-color: #0894ec; border-radius: 0; -webkit-box-flex: 1; -ms-flex: 1; border: 1px solid red; text-align: center; } </style> </head> <body> <div class="buttons-row"> <a href="#" class="button">首页 </a> <a href="#" class="button">导航 </a> <a href="#" class="button">关于我们 </a> <a href="#" class="button">联系我们 </a> <a href="#" class="button">给我们留言 </a> </div> </body> </html>
扫一扫
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
