html - 为什么 max-width 不能解决这个问题？

Question

使用普通的旧 CSS，为什么 'max-width' 不能在以下情况下工作：

button {
  text-align: center;
  max-width: 540px;
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 0 auto;
  border: none;
}

此元素的包装器：

#wrapper {
  max-width: 1024px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

编辑

添加到 jsfiddle 的代码：http: //jsfiddle.net/BXdrG/

Answer 1

为了max-width正常工作，您的元素首先需要一个特定的width. 使用100%来实现你想要的。看这里：

http://jsfiddle.net/QsHa9/

Answer 2

啊，好吧，我误解了它的用途。为了获得一个不会拉伸到大尺寸的流畅按钮，我添加了以下内容：

width:100%;
max-width: 540px;

感谢评论者！

Answer 3

button {
  text-align: center;
  max-width: 540px;
  height: auto;
  display: block;
  padding: 10px 0;
  margin: 0 auto;
  border: none;

  width:100%; /* you forgot this */
}