gpt4 book ai didi

html - 标签显示在复选框下方,两者都应居中对齐

转载 作者:太空宇宙 更新时间:2023-11-04 05:47:35 25 4
gpt4 key购买 nike

我很困惑。我得到了这个表格,jsfiddle:

https://jsfiddle.net/rx90f38u/1/

里面有样式,我不明白为什么“记住”我显示在复选框下面。

复选框和标签应在同一行并居中。

CSS:

.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
width: 100% !important;
display: inline-block !important;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-sizing: border-box;
color: #000;
background-color: #c1c1c1;
}

.bbp-login-form label {
text-align:left;
width: 100% !important;
margin: 10px 0;
display: inline-block !important;
}

HTML:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body>

<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
<fieldset>
<div class="bbp-username">
<label for="user_login">Username: </label>
<input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
</div>
<div class="bbp-password">
<label for="user_pass">Password: </label>
<input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
</div>
<div class="bbp-remember-me">
<input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
<label for="rememberme">Remember Me</label> </div>
</fieldset></form>

</body>

如果我添加这个 CSS,我就会得到 Remember Me 中心:

.bbp-login-form .bbp-remember-me label {
text-align: center;
width: 50%;
}

但即使我减少宽度仍然是一个问题。

最佳答案

试试这个

.bbp-login-form .bbp-remember-me label {
text-align: left;
width: auto !important;
vertical-align: initial;
}

关于html - 标签显示在复选框下方,两者都应居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58588235/

25 4 0