Javascript Angular Material - 为什么我的 md 按钮是全角的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31064887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material - Why is my md-button full-width?
提问by germainelol
Simple issue, I've made a really basic page to play around with Angular Material. I have a button which is visible on medium-sized devices which toggles the side navigation, and for some reason it is full width. There is no CSS which is making it full width, and there are no Material directives which are making it full width. It seems to have inherited the width of the container it's in, but I can't see why.
简单的问题，我制作了一个非常基本的页面来使用 Angular Material。我有一个在中型设备上可见的按钮，它可以切换侧面导航，由于某种原因，它是全宽的。没有 CSS 使其全宽，也没有 Material 指令使其全宽。它似乎继承了它所在容器的宽度，但我不明白为什么。
Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)
有一点角度材料知识的人能明白为什么吗？（只需调整窗口窗格的大小即可看到按钮）
Here's my CodePen:
这是我的 CodePen：
http://codepen.io/anon/pen/jPYNzy
http://codepen.io/anon/pen/jPYNzy
And the code:
和代码：
<!-- 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 -->
回答by miyamoto
Just wrap it in another divif this is undesired. The flex-direction of <div layout="column">seems to be responsible for the behavior.
div如果这是不受欢迎的，只需将其包装在另一个中。的 flex-direction<div layout="column">似乎对行为负责。
回答by Darren Sweeney
An elements width defaults to 100% of it's container, unless specified otherwise.
除非另有说明，元素宽度默认为其容器的 100%。
回答by vijay kani
I just add the DIV tag to md-button with style property of width 100px
我只是将 DIV 标签添加到宽度为 100px 的样式属性的 md-button
Its Work fine
它的工作正常
<div style="text-align:center;">
<md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
Toggle left
</md-button></div>
