1

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

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

这是该问题的一个示例：

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

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

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

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

4

4 回答 4

1

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

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

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

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

演示

于 2013-01-30T12:45:00.163 回答
0

请看这个是你需要的吗？

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

于 2013-01-30T12:37:51.477 回答
0

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

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

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

演示

于 2013-01-30T12:44:40.277 回答
0

感谢您的所有回答。不幸的是，如果不操纵菜单的宽度，我试图实现的似乎是不可能的。我认为可能是这种情况:-(

无论如何，谢谢你的所有提示

于 2013-01-30T13:19:40.030 回答