Ввод HTML и кнопка не меняются пропорционально - PullRequest
Новая
       30

Ввод HTML и кнопка не меняются пропорционально

0 голосов
/ 11 октября 2019

Я пытаюсь проверить входные данные HTML и модули CSS. У меня есть текстовый ввод, «слитый» с кнопкой. Я пытаюсь сделать кнопку отправки и ввод остается пропорциональным при изменении размера страницы. Это означает, что когда я изменяю размер страницы, высота и ширина не должны оставаться одинаковыми и должны уменьшаться пропорционально. Я использую модуль CSS "VW". Проблема в том, что, когда я устанавливаю для них высоту и ширину "(любое число) vw", только вход изменяет размер правильным образом. Кнопка остается неизменной независимо от того, как я изменяю размер страницы. 

loginText {
  font-family: 'Comfortaa', bold;
  height: 4vw;
  width: 30vw;
  border: 1px solid black;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

button {
  font-family: 'Comfortaa', bold;
  font-size: '50px';
  height: 4.5vw;
  width: 6vw;
  background: blue;
  color: white;
  margin-left: 0;
  border: 1px solid black;
}

loginText,
button {
  padding: 0.3em 0.4em;
  border: 1px solid black;
}

loginText {
  height: 4vw;
  width: 30vw;
  margin-right: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

button:active,
button:hover {
  background-color: #acf;
  outline: none;
}
<div id="loginInputs" ; style="text-align: center; padding-top: 4%;">
  <form>
    <input id="loginText" name="something" type="text"><button>Go</button>
  </form>
</div>

1 Ответ

1 голос
/ 11 октября 2019

Вы ошиблись несколькими вещами, такими как заполнение на кнопке, которое в какой-то момент не позволило уменьшить его размер, также у logintext не было # перед ним. это должно работать сейчас:) 

#loginText {
  font-family: 'Comfortaa', sans-serif;
  font-weight: bold;
  height: 4vw;
  width: 30vw;
  border: 1px solid black;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

button {
  font-family: 'Comfortaa', bold;
  font-size: 14px;
  height: 4.5vw;
  width: 6vw;
  background: blue;
  color: white;
  border: 1px solid black;
}

#loginText,
button {
  
  border: 1px solid black;
}

#loginText {
  height: 4vw;
  width: 30vw;
  margin-right: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

button {
  margin-left: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

button:active,
button:hover {
  background-color: #acf;
  outline: none;
}
<div id="loginInputs" ; style="text-align: center; padding-top: 4%;">
  <form>
    <input id="loginText" name="something" type="text"><button>Go</button>
  </form>
</div>
...