0

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

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

Tax Report 1
: Frequency - Weekly

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

4

6 回答 6

3

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

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

inline在 Web 开发中通常不赞成制作 div ，但正如下面评论的那样，也有例外。这是来自类似主题的帖子

<!-- 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... -->

在这里找到。跨度的存在是有原因的。

要浮动 div 的左侧，请将您的 CSS 修改为：

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

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

但我建议用跨度替换 div。

于 2012-08-03T11:53:35.183 回答
3

试试这个小提琴更新

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

.reportFrequency
{
    font:normal 10pt Arial;
    float:left;
}
于 2012-08-03T11:44:11.460 回答
2

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

http://jsfiddle.net/4yqJ8/

.reportTitle {
    display:inline-block;
}

.reportFrequency {
    display: inline-block;
}
于 2012-08-03T12:38:20.043 回答
2

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

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

于 2012-08-03T11:45:50.880 回答
1

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

如果你想让某些东西表现得像一个内联元素，那么你不应该将它编码为一个 div，而应该使用一个内联元素。MDN 上的内联元素。确实可以使用 css 完成所有工作，但有理由不这样做

  1. 你让自己的生活变得不必要地困难
  2. 您正在使 html 的语义更少，即：完全难以自行解释。

此外，如果你想确保它们始终保持在一行上，即使父容器太窄，你也可以给它赋值，white-space: nowrap

于 2012-08-03T12:03:39.087 回答
1

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

在您的情况下，这将是.reportTitleand .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

于 2012-08-03T12:08:07.460 回答