Почему между моей кнопкой и границей есть пробел? - PullRequest
Новая
       10

Почему между моей кнопкой и границей есть пробел?

0 голосов
/ 29 августа 2018

Веб-приложение

webapp

1008 * сниппет * snippet У меня проблема с высотой кнопки в Chrome. Он работает в Firefox просто отлично, но не заполняет всю высоту, хотя я установил его на 100%. Для меня это не имеет особого смысла, так что, может, кто-нибудь объяснит мне это? Это похоже на работу во фрагменте? Я на 100% не использую JavaScript для установки чего-либо из этого: только CSS, который я перечислил ниже. До сегодняшнего дня это не было проблемой ... что очень странно. body { background-color: dimgrey; margin: 0; padding: 0; } .topbar { border-radius: 0px; border-bottom: 1px lightgrey solid; margin-bottom: 0px; background-color: white; max-width: calc(80%-1px); height: 60px; max-height: 60px; text-align: right; display: flex; } .login-button { max-width: 15%; min-width: 15%; background-color: tomato; border: none; border-left: 1px lightgrey solid; login_text: 'color'; color: white; outline: none; cursor: pointer; font-size: 30px; height: 100%; } .e-mess { width: 85%; height: 100%; background: transparent; display: flex; justify-content: center; align-items: center; } <div class='topbar'> <div class='e-mess'></div> <button class='login-button'>login</button> </div>

1 Ответ

0 голосов
/ 29 августа 2018

Я не уверен, почему это было проблемой, но мне пришлось установить свойство min-height для класса topbar. 

.topbar {
  border-radius: 0px;
  border-bottom: 1px lightgrey solid;
  margin-bottom: 0px;
  background-color: white;
  max-width: calc(80%-1px);
  min-height: 60px;
  height: 60px;
  max-height: 60px;
  text-align: right;
  display: flex;
}
...