Question

可能之前有人问过/某人有类似的问题，但我一直在寻找很长时间，但找不到解决问题的方法。

我有一个名为div的{{1}}居中，其中有一个表单。我希望表单中的文本框几乎占据表单的整个宽度（它应该看起来像google的新签名形式）。

我正在使用css将输入loginBox设置为margin而将auto设置为width，但由于某种原因它无效。即使我将宽度设置为数字（即200px），宽度也保持不变。

我能使其工作的唯一方法是将输入的填充增加到100px，但这既没有响应，也不是一个好的做法。

这是我正在使用的代码：

90%

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;
}

Screenshot of what I get right now

Answer 1

修正您的width。而不是=它应该是:。你的代码看起来不错。并且width: 100%的工作方式与您的预期一致。

此外，正如评论中所述，height: 1500px;

中应为.pageMain

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

首先查看你的css文件

height=1500px; // Why =, not :? <----- PageMain class

width=90%; // <---- same here in input class

Answer 3

更改：

width=90%; height=1500px;

以

width:90%; height:1500px;

还可以使用* { box-sizing: border-box;}删除滚动条。

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

3 个答案: