Question

是否可以将单个md-tab元素与md-tabs的右侧对齐，同时将其余的标签保留在原来的位置？

-------------------------------------------------------------------------
| Tab 1 | Tab 2 | Tab 3 |                                      | Select |
-------------------------------------------------------------------------

我不一定需要选项卡中的select元素，但如果我将select放在md-tabs之外，它会显示在标签下，这不是什么我想要。

我知道这看起来像一个简单的问题，但我一直在努力使这项工作暂时停止。

以下代码：

codepen

Answer 1

您是否尝试使用 flex ？

然后试一试。

<div ng-cloak>
<md-content>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">
                <h1 class="md-display-2">Tab One</h1>
                <p>1</p>
            </md-content>
        </md-tab>
        <md-tab label="two">
            <md-content class="md-padding">
                <h1 class="md-display-2">Tab Two</h1>
                <p>2</p>
            </md-content>
        </md-tab>
        <md-tab label="three">
            <md-content class="md-padding">
                <h1 class="md-display-2">Tab Three</h1>
                <p>3</p>
            </md-content>
        </md-tab>
        <span flex></span>
        <select>
            <option value="">asdasd</option>
        </select>
    </md-tabs>
</md-content>

Answer 2

您可以在父容器中使用select的绝对定位，但这是一个肮脏的解决方案：如果行中有多个选项卡或小屏幕宽度，则select可以重叠选项卡。

请检查这个小提琴，它有效：https://jsfiddle.net/0Lxscboy/1/

如何将单个md-tab元素对齐到右侧

2 个答案: