Question

我尝试将span与a元素的右侧对齐，而不将其推到另一条线上，而无需手动设置包含div的宽度。

我尝试了white-space，position，float，text-align等各种组合，但我根本无法使其发挥作用。

以下是此问题的示例：

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

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

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

如果使用CSS无法实现这一点，那么请不要浪费时间帮助我使用Javascript，因为Stack上有更多人需要帮助，我可以自己编写这个部分。我只是希望没有必要： - ）

Answer 1

我在“将文档另存为”文本周围添加了<p>标记，然后在某些元素中添加了ID，以便您了解我正在更改/影响的内容。我只修复了一行，所以你可以看到我改变了什么，然后再修复它。

基本上，你想删除.shortcut上的浮动，并显示块/浮动，将img和span留在<a>内。我用ID而不是复杂的选择器做到这一点，所以你可以看到我在做什么。

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

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

Demo

Answer 2

请看这是你需要的吗？

<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>

CSS

.text-hint{display: inline; float: left;}
.shortcut{display:inline;float:right;}

http://jsfiddle.net/LFkkL/

Answer 3

我利用位置属性来实现值得关注的东西。给父母一个相对位置，给孩子一个绝对的位置，然后用正确的值将它设置在适当的位置。

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

.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;
}

DEMO

Answer 4

感谢您的所有答案。不幸的是，似乎在没有操纵菜单宽度的情况下我想要实现的目标是不可能的。我认为情况可能如此： - （

非常感谢您的所有提示

自动宽度与浮动权限内容

4 个答案: