html - 在 Angular 自动完成中向右浮动在 FF 中不起作用

Question

我正在使用 Angular 自动完成，我打算为每一行显示两个文本:一个在左边，另一个在最右边。我正在使用 float: right 来实现这一点。除了在 Firefox 上，它工作正常。

<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">    {{item.display}}</span>
<span style="float: right;">this should be on the far right</span>
</md-item-template>

将 float 跨度移动到另一个跨度之上可以修复它，但是当窗口大小变小时，跨度会相互重叠。只要有足够的空间容纳它，我就希望 float 跨度出现。任何帮助将不胜感激。

Answer 1

利用 Angular Material 的child alignment而不是使用 float 。

尝试这样的事情(未测试):

<md-item-template>
    <div layout="row" layout-align="space-between center">
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">
            {{item.display}}
        </span>
        <span>this should be on the far right</span>
    </div>
</md-item-template>