css - 为何div.checkbox input选择符不起作用？
本文介绍了css - 为何div.checkbox input选择符不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
很简单的一个html文件。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right">
<form action="">
<input type="input" value="电话 邮箱">
<input type="input" value="忘记密码">
<div class="checkbox">
<input type="checkbox">
<span>下次自动登录</span>
<a href="">忘记密码</a>
</div>
</form>
</div>
</div>
</body>
</html>
css文件是这样
div.main{
height:500px;
width:900px;
margin:20px auto 0 auto;
background-color:#f7f7f7;
}
div.left{
width:560px;
height:460px;
background-color:#f7f7f7;
position:relative;
}
div.left,div.right{
float:left;
}
div.right{
background-color:#ffffff;
height:380px;
width:330px;
}
form input{
margin:20px;
width:280px;
height:30px;
display:block;
text-indent:2em;
}
div.checkbox{
padding-left:10px;
}
div.checkbox input{
display:inline;
}
div.checkbox a{
margin-left:100px;
}
效果如下：
请问，为何 div.checkbox input{display:inline;} 没有起作用？
form input 设置了display:block;但是我的div.checkbox input在它的后面设置的，
为何不起作用？
解决方案
如图，你可以看到form input选择器里面的display: block;添加了删除线，说明你的display: inline;是在起作用，为什么效果看上去没有起作用是因为form input选择器里面设置了width: 280px;.
这篇关于css - 为何div.checkbox input选择符不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
