我有一个简单的表单
<div class="wrapper">
<div id="form">
<h3>Login</h3>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<fieldset>
<legend>Login</legend>
<label for="username">username:</label><input type="text" name="username" value="">
<br />
<label for="password">password:</label><input type="password" name="password" value="">
<br />
<input type="submit" name="login" value="submit"><br />
</fieldset>
</form>
</div>
和CSS
.wrapper {
margin-top: 180px;
}
#form {
width: 150px;
margin-left: auto;
margin-right: auto;
}
有了这个 css,我想将表单居中。
但我的主要问题是表单在 Google Chrome 和 Mozilla Firefox 上看起来不同。在 Firefox 上它更大而且不居中。
我使用的是 Firefox 42.0、Google Chrome 版本 46.0.2490.86 和 Ubuntu 14.04.3 LTS。
非常感谢。
最佳答案
可能是 firefox 为文本框应用了一些默认宽度。尝试在您的 CSS 中添加以下内容,以便 firefox 和 chrome 看起来一样。
#form input:not([type=submit])
{
width:150px;
}
关于HTML/CSS : Form does look different on firefox than on chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33994340/