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 */
}