html - 带有 float 内容的自动宽度

Question

我试图将 span 对齐到 a 元素的右侧，而不将其推到另一行，也没有手动设置包含 div 的宽度。

我尝试了各种white-space、position、float、text-align的组合等等，但我根本无法让它工作。

这是问题的一个例子:

http://jsfiddle.net/QgzbY/2/

请注意“Ctrl+Shift+S”位于“文档另存为”下方的一行，我希望它位于同一行，像上面的行一样向右对齐。换句话说，它需要增加包含元素的宽度以适应快捷文本。

问题简而言之:如何将元素 float 到父元素的右侧，同时始终将内容保持在一行中？

如果这无法使用 CSS 实现，那么请不要浪费您的时间帮助我使用 Javascript，因为 Stack 上还有很多人需要帮助，而我可以自己编写这部分内容。我只是希望没有必要:-)

Answer 1

我添加了一个 <p>标记“将文档另存为”文本，然后是某些元素的 ID，以便您知道我正在更改/影响的内容。我只修复了一行，所以您可以看到我更改了什么，然后对其余部分也进行修复。

基本上，您想删除 .shortcut 上的 float , 并显示 block / float 将 img 和跨度留在 <a> 内.我使用 ID 而不是复杂的选择器来完成此操作，因此您可以看到我在做什么。

.shortcut {
    float: none !important; // over riding your declaration elsewhere
}

#lol, #lolimg {
    display: block;
    float: left;
}

Demo