html - CSS-无法调整文本输入的大小

Question

之前可能有人问过/有人有类似的问题，但我已经搜索了很长时间，找不到解决我问题的方法。

我有一个名为 loginBox 的 div 居中，其中有一个表单。我希望表单中的文本框几乎占据表单的整个宽度(它应该看起来像谷歌的新登录表单)。

我正在使用 css 将输入的 margin 设置为 auto 并将 width 设置为 90%，但是对于某种原因它没有效果。即使我将宽度设置为数字(即 200px)，宽度也保持不变。

我可以让它工作的唯一方法是将输入的填充增加到 100 像素，但这既不是响应式的，也不是一个好的做法。

这是我使用的代码:

body {
  margin: 0;
  background-color: #EEEEEE
}

.menu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.menu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
}

.pageMain {
  width: 100%;
  padding: 16px;
  margin-top: 70px;
  height=1500px;
}

.loginBox {
  display: table;
  margin: auto;
  width: 50%;
  background-color: white;
  box-shadow: 2px 2px lightgrey;
  padding: 25px;
}

input {
  margin: auto;
  width=90%;
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

<div class="menu">
  <a class="active" href="index.html">Home</a>
  <a href="about.html">Grades</a>
  <a href="games.html">Behavior</a>
  <a href="utilities.html">Homework</a>
  <a href="tutorials.html">Learning Enviroments</a>
  <a href="tutorials.html">Time Table</a>
  <a href="tutorials.html">People</a>
  <a style="float: right" href="contact.html">Contact</a>
  <a style="float:right" href="contact.html">Login</a>

</div>

<div class="pageMain">

  <div class="loginBox">

    <h3>Sign in</h3>
    <h4>With your RSIS account</h4>

    <form>

      <input type="text" size="300" name="username" value="Email, RSIS username or id">

    </form>

  </div>

</div>

Screenshot of what I get right now

Answer 1

修正你的宽度。 = 应该是 :。否则您的代码似乎还不错。 width: 100% 的工作方式与您预期的一样。

此外，如评论中所述，它应该是 height: 1500px; in .pageMain

body {
  margin: 0;
  background-color: #EEEEEE
}

.menu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.menu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
}

.pageMain {
  width: 100%;
  padding: 16px;
  margin-top: 70px;
  height: 1500px;
}

.loginBox {
  display: table;
  margin: auto;
  width: 50%;
  background-color: white;
  box-shadow: 2px 2px lightgrey;
  padding: 25px;
}

input {
  margin: auto;
  width:100%;
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

<div class="menu">
  <a class="active" href="index.html">Home</a>
  <a href="about.html">Grades</a>
  <a href="games.html">Behavior</a>
  <a href="utilities.html">Homework</a>
  <a href="tutorials.html">Learning Enviroments</a>
  <a href="tutorials.html">Time Table</a>
  <a href="tutorials.html">People</a>
  <a style="float: right" href="contact.html">Contact</a>
  <a style="float:right" href="contact.html">Login</a>
</div>

<div class="pageMain">
  <div class="loginBox">
    <h3>Sign in</h3>
    <h4>With your RSIS account</h4>

    <form>
      <input type="text" size="300" name="username" value="Email, RSIS username or id">
    </form>
  </div>
</div>