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

【问题标题】：HTML Input and Button not resizing proportionallyHTML 输入和按钮未按比例调整大小
【发布时间】：2020-02-09 04:20:11
【问题描述】：

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

【解决方案1】：

你弄错了一些东西，比如按钮上的填充，它阻止了它在某些时候变小，而且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>

【讨论】：