好的，所以我愚蠢的小登录表单几乎是我想要的样子。 (这基本上是我有史以来的第一个 CSS 元素，也是自 updating 试图更新我 15 年的 HTML 技能以来的第一个 HTML 元素。)对于我的生活，我无法弄清楚如何获得“忘记密码？”链接向下移动，与“登录”按钮的中间或底部对齐。我试过移动 display: inline;和 vertical-align: middle;各种不同的选择器，但都不起作用!我什至尝试设置 anchor 的高度和/或 <li>元素。我不明白这是什么交易!非常感谢任何帮助!
这是我的代码:
form.login {
margin: 10px 10px 20px 20px;
padding: 0 0 0 0;
}
form.login fieldset{
margin: 0 0 0 0;
padding: 2px 2px 2px 2px;
border:2px solid;
border-radius: 5px;
width: 348px;
height: 90px;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding:0;
}
form.login fieldset fieldset {
border: 0;
width: 100%;
height: 40%;
display: inline;
vertical-align: middle;
}
form.login fieldset fieldset li{
float: left;
list-style: none;
width: 165px;
margin: 0 4px 0 4px;
}
form.login input {
width: 165px;
}
form.login label {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover {
color: blue;
}
form.login a:active {
color: blue;
}
form.login fieldset ul fieldset li button#submitLogin {
float: right;
}
和 HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<fieldset>
<li>
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li>
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
</fieldset>
<fieldset>
<li>
<a href="resetpass.php">Forgot Password?</a>
</li>
<li>
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
</fieldset>
</ul>
</fieldset>
</form>
</body>
</html>
编辑: Here's a screen shot of what it looks like with the code above.
最佳答案
尝试改变:
<li class="middle">
<a href="resetpass.php">Forgot Password?</a>
</li>
<li class="middle">
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
并将其添加到您的 CSS 中:
.middle {
height: 22px;
line-height: 22px;
}
这明确地给了它一个设置高度，然后通过 line-height 属性告诉它在 li 中垂直居中文本和表单对象。
关于css - 为什么这不会对齐中间或底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8106851/