Question

中显示的HTML

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

Tax Report 1
: Frequency - Weekly

虽然我已经安装了一个内联显示器，但它有两行。这里遗漏的是什么？

Answer 1

试试这个fiddle update

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

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

Answer 2

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

创建所需效果的最佳方法是将内部div向左浮动。如果它们比容器窄，那么它们将彼此相邻。

在网页开发中通常不赞成使用div inline，但如下所述，有例外情况。这是关于类似主题的帖子

<!-- 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左移，请将CSS修改为：

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

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

但我建议用跨度替换div。

Answer 3

您已将容器设为内联元素，但内部元素仍然是块元素，因此它们会一个在另一个下面显示。改为使内部元素内联。

演示：http://jsfiddle.net/LLq3v/5/

Answer 4

如果您需要保留设置宽度或高度的功能，也可以使用display: inline-block。哦，我有一个很好的下划线。

http://jsfiddle.net/4yqJ8/

.reportTitle {
    display:inline-block;
}

.reportFrequency {
    display: inline-block;
}

Answer 5

对.reportTitle和.reportFrequency使用span而不是div。 http://jsfiddle.net/LLq3v/7/

如果您希望某些内容的行为类似于内联元素，那么您不应将其编码为div，而应使用内联元素。 Inline Elements on MDN。确实，您可以使用css完成所有工作，但有理由不这样做

你为自己造成了不必要的生活
你使html语义更少，即：完全痛苦地解释它本身。

另外，如果你想确保它们总是停留在一行上，即使父容器太窄，你也可以给它一个值，white-space：nowrap

Answer 6

您必须将display:inline设置为您要显示的元素inline，而不是容器元素。

在您的情况下，这将是.reportTitle和.reportFrequency，而不是.repeaterIdentifier，这是容器元素。

.reportTitle
{
    font:bold 10pt Arial;
    display: inline; /* HERE */
}

.reportFrequency
{
    font:normal 10pt Arial;
    display: inline; /* HERE */
}
.repeaterIdentifier
{
    border-bottom:1px solid #A7A7A6;
    margin: 0 0 5px 0;
    display: inline /* This can be removed */
}

现场演示：jsFiddle

CSS内联显示不起作用

6 个答案: