Html 中间固定宽度的凹槽彼此相邻？

我正在尝试创建一个可在移动/桌面上查看的响应模板。我有我用div创建的“按钮”，它们向左浮动，并排放置。我希望它们居中，因为可能有3个按钮，或5个按钮或6个按钮。我希望所有的按钮看起来都一样，但如果有更多的按钮向下流动到下一行

像这样：

-按钮1-按钮2-按钮3-按钮4

-----按钮6-7----

因此，我不想使用相对div宽度，而是将其动态化，以便在手机上查看时可以显示

-按钮1-

-按钮2-

-按钮3-

宽度容器必须最大为80%，因为这是我的模板，我想把它与图像对齐

我目前有：

容器{ 左边距：10%； 保证金权利：10%； 宽度：80% } buttonbg先生{ 颜色：ffffff； 字号：500； 线高：正常； 文字装饰：无； 文本对齐：居中； 文本转换：大写； 字母间距：2px； 字体大小：24px； 边框：1px实心ffffff； 填充：10px 14px； 边界半径：5px； 保证金：2倍； 浮动：左； 宽度：20%； 最小宽度：165px； } a、 钮扣{ 颜色：ffffff； 字号：500； 线高：正常； 文字装饰：无； } 按钮1{背景色：rgba255、204、204,1；} 按钮2{背景色：rgba255、153、153、1；} 按钮3{背景色：rgba255，163，194,1；} 按钮4{背景色：rgba255、204、153,1；} 按钮5{背景色：rgba255，245，245,1；} 按钮6{背景色：rgba255，245，245,1；} .buttonbg:悬停{ 背景色：CCCC！重要； } 移动电话

link rel=stylesheet href=styles/mobile.css 媒体=仅屏幕和最大设备宽度：490px

这是针对移动设备的

使用调用桌面的其他CSS文件

桌面CSSPC

link rel=stylesheet href=styles/mobile.css 媒体=仅屏幕和最小设备宽度：491px

这种技术被称为CSS-medi查询，用于创建响应性网页

您必须在另一个文件中编写CSS代码，并按照我向您展示的方式调用它。只有一个CSS文件-头部有两个html元素