HTML：如果按钮数量超过窗口宽度，我需要将所有按钮保持在同一行。如何解决这一行问题？

我的项目名称是谷歌模块标签应用程序。我已经在这个项目工作

在这里我面临一个问题。如果超过窗口宽度，我需要将所有按钮保持在同一行。但是在我的项目中，按钮被剪切并移动到下一行。我如何解决这个问题

正文{
/*填充：100px*/
}
.限制{
宽度：1600px；
溢出：自动；
}
母公司{
位置：相对位置；
利润率：20px；
宽度：800px；
高度：40px；
}
.按钮{
位置：相对位置；
/*左：0*/
显示：内联；
宽度：200px；
高度：75px；
背景颜色：浅灰色；
字体大小：大号；
/*边框：3px实心#ccc；
边际：0 10px 0；
盒影：0 0 2px#fff插图*/
-webkit变换：透视（100px）旋转（30度）；
/*-o变换：旋转（30度）；
-ms变换：rotateX（30度）*/
-莫兹变换：透视（100px）旋转（30度）；
}
.按钮：悬停{
游标：默认值；
}
.按钮：激活{
光标：移动；
z指数：40；
}
.按钮.拖动{
z指数：99；
背景颜色：橙色；
}

汽车1
汽车2
汽车3
汽车4
汽车5
电脑类
消息
本性
权力

不要用像素表示宽度，而要用%表示宽度

正文{
/*填充：100px*/
}
.限制{
宽度：1600px；
溢出：自动；
}
母公司{
位置：相对位置；
利润率：20px；
宽度：800px；
高度：40px；
}
.按钮{
位置：相对位置；
/*左：0*/
显示：内联；
宽度：8%；
高度：50px；
背景颜色：浅灰色；
字体大小：大号；
/*边框：3px实心#ccc；
边际：0 10px 0；
盒影：0 0 2px#fff插图*/
-webkit变换：透视（100px）旋转（30度）；
/*-o变换：旋转（30度）；
-ms变换：rotateX（30度）*/
-莫兹变换：透视（100px）旋转（30度）；
}
.按钮：悬停{
游标：默认值；
}
.按钮：激活{
光标：移动；
z指数：40；
}
.按钮.拖动{
z指数：99；
背景颜色：橙色；
}

汽车1
汽车2
汽车3
汽车4
汽车5
电脑类
消息
本性
权力

不要用像素表示宽度，而要用%表示宽度

正文{
/*填充：100px*/
}
.限制{
宽度：1600px；
溢出：自动；
}
母公司{
位置：相对位置；
利润率：20px；
宽度：800px；
高度：40px；
}
.按钮{
位置：相对位置；
/*左：0*/
显示：内联；
宽度：8%；
高度：50px；
背景颜色：浅灰色；
字体大小：大号；
/*边框：3px实心#ccc；
边际：0 10px 0；
盒影：0 0 2px#fff插图*/
-webkit变换：透视（100px）旋转（30度）；
/*-o变换：旋转（30度）；
-ms变换：rotateX（30度）*/
-莫兹变换：透视（100px）旋转（30度）；
}
.按钮：悬停{
游标：默认值；
}
.按钮：激活{
光标：移动；
z指数：40；
}
.按钮.拖动{
z指数：99；
背景颜色：橙色；
}

汽车1
汽车2
汽车3
汽车4
汽车5
电脑类
消息
本性
权力

只需添加 显示：内联flex； 只需在.limit类中添加 显示：内联flex；

---

对于.limit类

而言，这只是使用宽度大小的一种替代方法-flex的使用：

身体
{
/*填充：100px*/
}
.限制
{
宽度：1600px；
显示器：flex；
柔性包装：nowrap；
}
母公司{
位置：相对位置；
利润率：20px；
宽度：800px；
高度：40px；
}
.按钮{
位置：相对位置；
/*左：0*/
显示：内联flex；
宽度：200px；
高度：75px；
背景颜色：浅灰色；
字体大小：大号；
/*边框：3px实心#ccc；
边际：0 10px 0；
盒影：0 0 2px#fff插图*/
-webkit变换：透视（100px）旋转（30度）；
/*-o变换：旋转（30度）；
-ms变换：rotateX（30度）*/
-莫兹变换：透视（100px）旋转（30度）；
}
.按钮：悬停{
游标：默认值；
}
.按钮：激活
{
光标：移动；
z指数：40；
}
.按钮.拖动{
z指数：99；
背景颜色：橙色；
}
汽车1
汽车2
汽车3
汽车4
汽车5
电脑类
消息
本性
权力

只是使用宽度尺寸的一种替代方法-flex的使用：

身体
{
/*填充：100px*/
}
.限制
{
宽度：1600px；
显示器：flex；
柔性包装：nowrap；
}
母公司{
位置：相对位置；
利润率：20px；
宽度：800px；
高度：40px；
}
.按钮{
位置：相对位置；
/*左：0*/
显示：内联flex；
宽度：200px；
高度：75px；
背景颜色：浅灰色；
字体大小：大号；
/*边框：3px实心#ccc；
边际：0 10px 0；
盒影：0 0 2px#fff插图*/
-webkit变换：透视（100px）旋转（30度）；
/*-o变换：旋转（30度）；
-ms变换：rotateX（30度）*/
-莫兹变换：透视（100px）旋转（30度）；
}
.按钮：悬停{
游标：默认值；
}
.按钮：激活
{
光标：移动；
z指数：40；
}
.按钮.拖动{
z指数：99；
背景颜色：橙色；
}
汽车1
汽车2
汽车3
汽车4
汽车5
电脑类
消息
本性
权力

试试这个

使用与代码相同的代码，只需给

空白：nowrap属性设置为
.limit
类，该属性不允许换行，因此会自动滚动

希望这个解决方案能解决你的问题
 试试这个

使用与代码相同的代码，只需给
空白：nowrap属性设置为
。限制
类，该属性不允许自动换行