How to align a single md-tab element to the right

问题

Is it possible to align a single md-tab element to the right of md-tabs, while having the rest of the tabs remain where they are?

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

I don't necessarily need the select element in a tab, but if I put the select outside of the md-tabs it shows up under the tabs, which isn't what I want.

I know it looks like a simple question, but I've been struggling to make this work for a while now.

Here's the code:

codepen

回答1:

You can simply use absolute positioning for select inside parent container, but this is a dirty solution: select can overlap the tabs in case of many tabs in a row or a small screen width.

Please check this fiddle, it works: https://jsfiddle.net/0Lxscboy/1/

回答2:

Did you try using flex ?

Then try this.

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

来源：https://stackoverflow.com/questions/47247816/how-to-align-a-single-md-tab-element-to-the-right