HTML输入和按钮未按比例调整大小

Question

我正在尝试测试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>

我正在尝试测试HTML输入和CSS单元。我所拥有的是一个带有按钮的“合并”文本输入。我试图使“提交”按钮和输入在页面调整大小时保持成比例。意思是，当我...

Answer 1

您犯了一些错误，例如按钮上的填充，这会阻止它在某些时候变小，而且logintext的前面也没有#。它现在应该可以工作了：）