Почему не применяются стили (flexbox)?

Question

[Ольга Миронова]

<div class = "wrapper">
  <input class = "input"/>
  <button class = "button"></button>
</div>

Пожалуйста подскажите, я не очень хорошо знаю flex, и не пойму почему такое поведение(...
1. задаю классу wrapper display: flex, мой инпут и кнопка становятся в ряд, потом стилизую инпут - стили применяются, а на кнопке не применяются(((

.wrapper {
  display: flex;
}

.input {
  height: 25px;
  width: 300px;
  border: 1px solid #cecece;
  border-radius: 6px;
  outline: none;
  padding: 2px 5px;
  font-size: 15px;
};

.button {
  height: 25px;
  width: 120px;
  background-color: red;
  margin-left: 40px;
  cursor: pointer;
};

Comments

[Rustam Bainazarov]

Оформите код на jsfiddle.net.

[Ольга Миронова]

Рустам Байназаров, простите, я не знаю как это сделать)))

[Rustam Bainazarov]

У вас ошибка в CSS помимо всего прочего:
};

[Rustam Bainazarov]

Ольга Миронова, вот так:


Все стили применяются, если исправите ошибку.

[Ольга Миронова]

Рустам Байназаров, ой простите я не правильно скинула(( в редакторе кода у меня есть };

[Rustam Bainazarov]

Ольга Миронова, ну вот именно, что не должно быть этого.

Правило в CSS закрывается без точки с запятой:

.class {
   color: #fff;
} /* Тут не надо точки с запятой */

Собственно, из-за этого и не красилась ваша кнопка.

[Ольга Миронова]

Рустам Байназаров, ой спасибочки!!!!! правда!!! убрала ";" в конце каждого блока кода в css и всё заработало! А почему так? нельзя ставить ;?

[Rustam Bainazarov]

Ольга Миронова, никогда нельзя было. Одно из базовых понятий CSS. На уровне класса и ID.

Не очень понимаю, как вы до этого верстали. С учётом того, что это ломает всё в CSS-коде.

[Ольга Миронова]

Спасибо большое!!!!!

[Rustam Bainazarov]

Ольга Миронова, не за что!

Лучше удаляйте вопрос, чтобы не сбивать людей с толку :))

[Ольга Миронова]

Рустам Байназаров, а как удалить?

[Rustam Bainazarov]

Ольга Миронова, ладно, сейчас ответ напишу лучше, отмечайте решением — так быстрее будет. Главное, чтобы вопрос не висел без ответа.

[Rustam Bainazarov]

Ольга Миронова, кстати. Ещё ошибка.

Так нельзя:
<div class = "wrapper"></div>

Вот так надо:
<div class="wrapper"></div>

И у одинарных тегов (типа input'a) не обязательно ставить закрывающий слэш.

Answer 1

[Rustam Bainazarov]

Правило в CSS закрывается без точки с запятой:

.class {
   color: #fff;
} /* Тут не надо точки с запятой, точнее, он тут запрещен, ибо он будет всё ломать в последующем правиле */

Собственно, из-за этого и не красилась ваша кнопка. Все стили применяются, если исправите ошибку:



Ещё ошибка. Так нельзя:
<div class = "wrapper"></div>

Вот так надо:
<div class="wrapper"></div>