无法将多个盒子放在一行中

Question

Click here to access the website

本网站使用Javascript，CSS和HTML开发。 我们是由网页设计师开发的。当我们要求他修改网站时，他拒绝，所以我们尝试自己做。

网站中的设计部分是使用CSS完成的。我们想在联系我们按钮之前再添加一个按钮（测试服务）。我们完成了代码更改并添加了按钮。但问题是在添加按钮后我们开始获得两行。第一行有5个按钮，第二行有2个按钮。 我尝试通过在css中将文本大小从14px更改为10px来解决问题，但在执行此操作后，文本变得很小以便阅读。 然后我们尝试增加保证金但没有得到结果。

以下是修改后菜单的屏幕截图 -

以下是修改前菜单的屏幕截图 -

Till now we have not updated the actual website so you can't see the second line on the actual website.

Answer 1

当您将浏览器窗口缩小到大约1250px的宽度时，当前网站上已存在两行菜单项的问题。试试看！

为了能够将更多项目放在一行中，您必须减少每个项目的水平填充量！

在文件style.css，行1099中，您应找到CSS选择器#cssmenu a {...}。在此处将padding: 10px 33px;更改为类似padding: 10px 10px;的内容，因为后一个值（33px）指定项目消耗的水平空间量。这应该解决你现在的问题，但要注意问题实际上也取决于浏览器窗口的大小。浏览器尺寸越小，某些项目就越有可能突破新线。

Answer 2

我认为你应该把你的

大小放在％。现在它们是104px。试试％。每个

元素可能有10％。

Answer 3

具体添加菜单项的特定情况的解决方案如下：

进入style.css到行号1099并说明  #cssmenu你找填充物：10 33px;并将其更改为填充：10px 21px;

让我警告您，此解决方案仅在您添加测试服务时才有效，否则宽度将再次中断。

然而，实际上没有一个全面的解决方案，因为（遗憾地说）您的网站编码非常糟糕。