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

Question

我正在尝试测试 HTML 输入和 CSS 单元。我有一个带有按钮的文本输入 "merged"。我正在尝试使提交按钮和输入在页面调整大小时保持成比例。意思是，当我调整页面大小时，高度和宽度不应保持不变，而是应按比例缩小。我正在使用 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>

Answer 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>

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

HTML Input and Button not resizing proportionally

html

css

input

alignment

resizable