Html 为什么 max-width 不能解决这个问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14938428/
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
Why would max-width not work on this?
提问by egr103
Using plain old CSS, why won't 'max-width' not work on the following:
使用普通的旧 CSS，为什么 'max-width' 不适用于以下情况：
button {
text-align: center;
max-width: 540px;
height: auto;
display: block;
padding: 10px 0;
margin: 0 auto;
border: none;
}
The wrapper for this element:
此元素的包装器：
#wrapper {
max-width: 1024px;
overflow: hidden;
position: relative;
margin: 0 auto;
padding: 0 50px;
text-align: center;
}
EDIT
编辑
Code added to jsfiddle: http://jsfiddle.net/BXdrG/
添加到 jsfiddle 的代码：http: //jsfiddle.net/BXdrG/
回答by Michael Giovanni Pumo
For max-widthto work correctly, your element first needs a certain width. Use 100%to achieve what you want. See here:
为了max-width正常工作，您的元素首先需要某个width. 用100%来实现你想要的。看这里：
回答by egr103
Ah ok, I misunderstood its use. To get a fluid button that won't stretch to massive sizes I added the following:
啊好吧，我误解了它的用途。为了获得一个不会拉伸到大尺寸的流畅按钮，我添加了以下内容：
width:100%;
max-width: 540px;
Thanks commenters!
感谢评论者！
回答by Milche Patern
button {
text-align: center;
max-width: 540px;
height: auto;
display: block;
padding: 10px 0;
margin: 0 auto;
border: none;
width:100%; /* you forgot this */
}
