html - 使用显示 :inline 未将 Div 对齐成一行

Question

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

我已经尝试为这些 div 设置 display:inline 但这并没有解决问题。看起来其他一些样式正在破坏我的显示。

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

我希望从 Test 1 标签开始的 4 个元素显示在一行中:文本框、选择、文本框、选择。

如果有人可以查看此表单并向我解释为什么在使用 display:inline 时失败，我将不胜感激

Answer 1

它仍然存在一些布局问题(由于您的测试，我假设)，但这两条规则至关重要:

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

Inline-block 确保那些 div 仍然有它们的填充和边距而不是完整的 block (不占用 100% 的宽度，从而迫使下一个非 block 元素进入新行)。

Vertical-align，顾名思义，强制所有这些内联 block 粘在其父元素的顶部。当你删除你的测试对象时，你可能不需要它(比如那个标签，一两个添加了样式的元素)。但基本上，它可以让你避免这种情况:

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

取而代之:

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

注意:那些逼真的图形代表 div 框。