Angular Material - 为什么我的 md-button 是全角的？

Question

简单的问题，我制作了一个非常基本的页面来玩 Angular Material。我有一个在中型设备上可见的按钮，可以切换侧面导航，并且由于某种原因它是全宽的。没有 CSS 使其成为全角，也没有 Material 指令使其成为全角。它似乎继承了它所在容器的宽度，但我不明白为什么。

有一点 Angular Material 知识的人能看出为什么吗？（只需调整 window 窗格的大小即可看到该按钮）

这是我的 CodePen：

http://codepen.io/anon/pen/jPYNzy

和代码：

<!-- Container -->
<div layout="column" layout-fill>
    <div layout="row" flex>

        <!-- Content -->
        <md-content flex>

            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h1>Title</h1>
                </div>
            </md-toolbar>

            <div layout="column" class="md-padding">
                <p>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
                </p>
                <md-button ng-click="toggleLeft()" hide-gt-md>
                    Toggle left
                </md-button>
            </div>

        </md-content><!-- ./Content -->

    </div>
</div><!-- ./Container -->

Answer 1

元素宽度默认为其容器的 100%，除非另有说明。

Answer 2

我只是将 DIV 标签添加到样式属性宽度为 100px

的 md-button

工作正常

 <div style="text-align:center;">
                <md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
                    Toggle left
        </md-button></div>

Answer 3

Just wrap it in another div 如果这是不需要的。 <div layout="column"> 的 flex-direction 似乎是造成这种行为的原因。

Angular Material - 为什么我的 md-button 是全角的？

Angular Material - Why is my md-button full-width?

javascript

css

angularjs

material-design

angular-material