Html 具有浮动右内容的自动宽度

我正在尝试将

span

与

a

元素的右侧对齐，而无需将其推到另一行上，也无需手动设置包含

div的宽度

我尝试了各种各样的组合，包括
空白
、
位置
、
浮动
、
文本对齐
等等，但我根本无法实现

以下是问题的一个例子：


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

问题简而言之：如何将元素浮动到父元素的右侧，同时始终将内容保持在一行上

如果使用CSS无法实现这一点，那么请不要浪费时间帮助我使用Javascript，因为堆栈中还有很多人需要帮助，我可以自己编写这一部分。我只是希望没有必要：-）请看这是你需要的吗

<li>
    <a href="javascript:void(0)" class="key-ctrl-s">
       <img src="//beta.example.net/_images/_icons/save-20x20.png"/>
       <span class="text-hint">Save Document</span>
       <span class="shortcut">Ctrl+S</span></a>
    </li>

请看，这是您需要的吗

<li>
    <a href="javascript:void(0)" class="key-ctrl-s">
       <img src="//beta.example.net/_images/_icons/save-20x20.png"/>
       <span class="text-hint">Save Document</span>
       <span class="shortcut">Ctrl+S</span></a>
    </li>

我利用职位属性实现了一些值得一看的东西。给父对象一个相对位置，给其子对象一个绝对位置，然后使用正确的值将其设置在正确的位置

此外，我还增加了下面一行的宽度

.win_menu li {
    display:block !important;
    float:none !important;
    padding:0 !important;
    margin:0 !important;
    height:20px !important;
    min-width:200px !important;
    white-space:nowrap !important;
    border:1px solid transparent !important;
    z-index:10 !important;
}

我利用职位属性实现了一些值得一看的东西。给父对象一个相对位置，给其子对象一个绝对位置，然后使用正确的值将其设置在正确的位置

此外，我还增加了下面一行的宽度

.win_menu li {
    display:block !important;
    float:none !important;
    padding:0 !important;
    margin:0 !important;
    height:20px !important;
    min-width:200px !important;
    white-space:nowrap !important;
    border:1px solid transparent !important;
    z-index:10 !important;
}

我在“将文档另存为”文本周围添加了一个
标记，然后为某些元素添加了一个ID，以便您知道我正在更改/影响什么。我只修改了一行，所以你可以看到我修改了什么，然后再修改其余的

基本上，您希望删除
.shortcut
上的float，并在
中的img和span中显示block/float。我在“将文档另存为”文本周围添加了一个
标记，然后为某些元素添加了一个ID，以便您知道我正在更改/影响什么。我只修改了一行，所以你可以看到我修改了什么，然后再修改其余的

基本上，您希望删除
.shortcut
上的float，并在
中显示block/float离开img和span。谢谢您的回答。不幸的是，如果不操纵菜单的宽度，我试图实现的目标似乎是不可能的。我想可能是这样的：-(

无论如何，谢谢你的所有提示
谢谢你的所有答案。不幸的是，如果不控制菜单的宽度，我想我想要实现的目标似乎是不可能的。我想可能是这样的：-(

无论如何，感谢您的所有提示
+1，感谢您对问题的表述方式。+1，感谢您对问题的表述方式。感谢您的回答，尽管@defau1t的回答似乎有效better@BenCarey哦，我明白了，我不知道菜单的宽度是固定的。你说得对！我刚看完答案，注意到了。看起来像你的更好吗answer@BenCarey哦，很抱歉删除了你不想要它的想法哈哈。是的，这应该考虑到“将文档另存为”的宽度，我不认为这会起作用！非常奇怪，谢谢你的帮助：-）感谢您的回答，不过@defau1t的回答似乎有效better@BenCarey哦，我明白了，我不知道菜单的宽度是固定的。你说得对！我刚看完答案，注意到了。看起来你的更好answer@BenCarey哦，抱歉，我以为你不想要它，哈哈。是的，这应该考虑到“将文档另存为”的宽度我认为这是行不通的！非常奇怪，谢谢你的帮助：-）谢谢你的回答。这并不是我想要的那样，因为宽度不是自动的。如果文本“将文档另存为”较长，则它将与快捷方式重叠：-（感谢您的回答。由于宽度不是自动的，因此这与我希望的方式不太相符。如果文本“将文档另存为”较长，则它将与快捷方式重叠：-（请看JSFIDLE示例恐怕没有，您增加了
最小宽度
。这确实解决了自动宽度问题。请看JSFIDLE示例恐怕没有，您增加了
最小宽度
。这确实解决了自动宽度问题。