Почему max-width не работает над этим?

используя простой старый 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/

10
button css html

3 ответов

на max-width чтобы работать правильно, ваш элемент сначала нуждается в определенном width. Использовать 100% для достижения того, что вы хотите. Смотрите здесь:

http://jsfiddle.net/QsHa9/

17

Ну ладно, я неправильно понял его использование. Чтобы получить кнопку жидкости, которая не будет растягиваться до огромных размеров, я добавил следующее:

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

спасибо комментаторам!

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

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