html中,在form框架下,记住我的勾选框和记住我标签不在同一行
时间: 2023-05-30 17:06:49 浏览: 89
可以使用CSS中的display属性来实现记住我的勾选框和标签不在同一行,例如:
HTML代码:
```
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="remember">记住我:</label>
<input type="checkbox" id="remember" name="remember">
<label for="remember">下次自动登录</label><br>
<input type="submit" value="登录">
</form>
```
CSS代码:
```
form label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
form input[type="checkbox"] {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
form label[for="remember"] {
display: inline-block;
width: auto;
margin-right: 0;
vertical-align: middle;
}
```
上述CSS代码中,首先将label和input元素的display属性设置为inline-block,使它们可以在同一行显示,并使用margin-right属性来控制它们之间的间距。然后针对记住我标签,将它的display属性设置为inline-block,宽度设置为auto,去掉了右边的margin,并使用vertical-align属性来使它和勾选框垂直居中对齐。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)