HTML/CSS 问题：div 的一部分被浮动到下一行，我希望它在同一行答案

【问题标题】：HTML/CSS question: Part of div being floated to next line, I want it on the same lineHTML/CSS 问题：div 的一部分被浮动到下一行，我希望它在同一行
【发布时间】：2011-06-16 02:46:50
【问题描述】：

我正在从数据库中加载姓名/等级，这很完美......但是，与此人相关的等级由于某种原因被浮动到下一行，我不知道为什么，如您所见图中：http://i.stack.imgur.com/rqhjp.png

我希望该数字等级在同一行，在右侧对齐，但我不知道为什么它会被推到下一行。这是我的php：

echo '<div class = "name">' . $firstname . " "  . $lastname . "<strong>" . '<p align="right">' . $avg . '</p></strong></div>';

以及它所指的 CSS：

}

#content .name{
    background: #FFF;
    float:left; 
    width: 220px;
    padding: 0px;
    position: relative;
    margin: 0px;
    font-size: 1.4em;
    border: 2px solid #CCC;
    border-radius: 10px;
}

【问题讨论】：

代替 PHP 回显，只需包含它创建的 HTML 行之一。

标签： php mysql html css database

【解决方案1】：

不要使用p 和align，而是将等级放在右侧的span 和float 中。您可以在 this fiddle 中看到它的工作原理。

【讨论】：

酷！我还没有使用过很多跨度，我刚刚进入这个......非常感谢你。我会尽快接受这个答案。
没问题。 @Dickie 在他的回答中提到，p 标签的问题是，作为块元素，它占用了容器宽度的 100%。它还在其上方和下方增加了空间，这导致它被进一步向下推。另请注意，您应该真正使用 CSS（就像我在示例中使用 float:right 一样）而不是像 align 这样的属性。

【解决方案2】：

'p' 是一个块元素，默认为 100% 宽度。您可以在 p 标签上设置宽度或向右浮动。

【讨论】：

【解决方案3】：

我认为如果你想显示每个人，你应该使用 table 而不是 divs

【讨论】：