Div不使用display：inline对齐成一行

Question

我收到了使用Cobalt 8 Joomla插件生成的提交表单。它有4个字段：2个文本框和2个选项，每个字段都存储在单独的div中，所以在下一行。但我需要它们以某种方式放在同一条线上。

我已经尝试将 display：inline 设置为这些div，但这并没有解决问题。看起来其他一些样式会破坏我的显示效果。

就Joomla中有很多其他css文件而言，我无法创建JSFiddle，但这里是指向有问题的表单的链接：Form with divs

我希望从测试1 标签开始的4个元素显示在一行中：textbox，select，textbox，select。

如果有人可以查看此表单并解释我为什么在使用 display：inline

时失败，我将不胜感激

Answer 1

它仍然存在一些布局问题（由于您的测试，我认为），但这两个规则至关重要：

.control-group {
    display: inline-block;
    vertical-align: top;
}

内联块确保这些div仍然具有填充和边距而不是完整的块（不占用100％的宽度，从而将下一个非块元素强制转换为新行）。 / p> 正如名称所示，

垂直对齐会强制所有这些内联块粘贴到其父元素的顶部。删除测试对象时可能不需要它（比如标签，一个或两个带有添加样式的元素）。但基本上，它可以让你避免这种情况：

---   -----    
| |   |   |  ----
| |   |   |  |  |
| |   |   |  ----
---   -----

并改为：

---   -----  ----    
| |   |   |  |  |
| |   |   |  ----
| |   |   |  
---   -----

注意：那些照片般逼真的图形代表div框。