Question

我对html和css不太好，所以我使用模板，但无论我知道我尝试使用它。

以下是问题http://i53.tinypic.com/dmw6yt.jpg

的图片

正如您所看到的，用户测试实际上是在一个新行上。这不是它应该如何。它应与此文本“用户X的帐户统计信息”位于同一行。

我使用的html和css是

<div class="user">Account stats for user<div class="info">test</div></div>

div.user
{
    font-size: 13px;
    text-align: center;
}

div.info
{
    font-size: 18px;
}

Answer 1

使用内联元素<span>代替块元素<div>

内联元素用于要显示在同一行上的文本等元素，然后在没有足够空间时下降到先前内联元素下方。块元素旨在用于站点的结构。

Answer 2

这是因为DIV会自动指定一个新行，因为它是一个“块级”元素。在这种情况下，我会替换<div>的所有<span>，因为它们是内联元素。

您还可以使用display:inline上的CSS属性<div>来覆盖此行为。

Answer 3

你把“test”这个词放在新的div中。这意味着这个单词将在新行上。尝试使用带有class或id而不是div的span。如果你真的想在单词“test”中使用div，你可以指定float属性或内联显示

<div class="user">Account stats for user<span class="info">test</span></div>


.info
            {
            margin-left: 10px;
            font-size: 18px;
            }

Answer 4

使用<span class="info">代替<div>，或使用这些CSS：

div.info
{
    font-size: 18px;
    display: inline-block;
}

通常您应该更喜欢使用span，但有几种情况（例如，如果您要指定元素的宽度）需要div。在您的情况下，请使用span。

Answer 5

如果你自动希望它在同一条线上，我建议改为使用<span>。

<span class="user">Account stats for user</span><span class="info">test</span>

如果你绝对需要使用div，那么：

<div class="user">Account stats for user</div><div class="info">test</div>

使用CSS：

div.user
{
    font-size: 13px;
    text-align: center;
}

div.info
{
    font-size: 18px;
    float:left;
}

Answer 6

试试这个：

div.user
{
font-size: 13px;
text-align: center;
display: inline;
}

div.info
{
font-size: 18px;
}

我认为这样可以解决问题。

Answer 7

你可以添加'display：inline;'他们应该工作。

或者你可以将它们漂浮到左侧，也可能会起作用。 '浮动：左;'

Answer 8

将此内容放入div.info

display: inline;

所以你的div.info类看起来应该是这样的

div.info 
{     
font-size: 18px; 
display: inline;

}

div对齐问题

8 个答案: