浮动：右键在FF中删除文本

Question

我在ExtJs中有一个标题栏，其中有一个带有用户名的div。我希望它出现在标题栏的右侧，我可以用'浮动：右边'来做它但是在FF中它会将文本放在一条线上，因为它在Chrome中很好用吗？

HTML：

<span unselectable="on" class="x-panel-header-text x-panel-header-text-default" id="programList_header_hd-textEl">Program Access permissions (TestResetValidity)<div class="programusername">Test Reset Validity</div></span>

CSS：

.programusername {
    position: relative;
    float: right;
    margin-right: 70px;
}

如何在所有浏览器中将它们排列在这样的排列中，而不仅仅是chrome（下方）？

Answer 1

首先，永远不要将像div这样的块元素放在像span这样的内联元素中。

您可以将正确的文字放在另一个div中，然后将其放在div#programusername之后，这将解决它。

此外，无需将位置更改为相对位置。

最后，在您使用float填充的元素之后放置一个<div style="clear: both;">，以防止替换其他页面元素。

Answer 2

尝试将overflow: hidden;添加到父<span>

Answer 3

试试这个：

.programusername {
    position: relative;
    float: right;
    margin-right: 70px;
    display: inline-block;
}