为什么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 */
}