html - CSS 内联显示不起作用

Question

我有 HTML，如 http://jsfiddle.net/Lijo/LLq3v/1/ 所示

我需要将以下两个div内容放在一行。

Tax Report 1
: Frequency - Weekly

虽然我放置了一个内联显示，但它是分两行显示的。这里缺少什么？

Answer 1

使容器 div inline 不会产生您想要的效果。这将导致容器本身充当内联元素，请参阅 http://www.tizag.com/cssT/inline.php .

创建所需效果的最佳方法是将内部 div float 到左侧。如果它们比容器窄，那么它们将并排放置。

制作 divs inline 在 web 开发中通常是不受欢迎的，但是正如下面评论的那样，也有异常(exception)。这是来自类似主题的帖子

<!-- An inline div is a freak of the web & should be beaten until it becomes a span 
(at least 9 times out of 10)... -->

<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->

找到 here .跨度的存在是有原因的。

要使 div 的左侧 float ，请将您的 CSS 修改为:

.reportTitle
{
    font:bold 10pt Arial;
    float: left;
}

.reportFrequency
{
    font:normal 10pt Arial;
    float:left;
}

但我建议用 span 替换 div。