Question

我刚开始学习html和css3。尝试创建一个登录页面，但当我尝试添加一次复选框时，它不与标签内联。当我为相同的代码运行它的内联复选框时。无法理解究竟是什么问题。

HTML代码

<div class="checkbox1">
                <input type="checkbox" id="cb">
                <label for="cb">Stay signed in</label> 
</div>

CSS代码

#wrapper #subwrapper .checkbox1{
    display: inline-block;         
    float: left; 
    font-size: 20px;
    color: #ffffff;
}

当我在完整的html代码和css代码中包含相同内容时，复选框和标签并不完美。

完整的HTML代码是。

<!doctype html>
<head>
    <title>Dchamps-Signin</title>
    <style> 
        body {
            background-image: url("bg_signin.jpg"); 
            background-repeat: no-repeat;
        }       
    </style>
    <link rel="stylesheet" type="text/css" href="signin.css">
</head>
<body>
    <header>
            <div class="header">

            <div>
    </header>

    <div id="wrapper">  
        <div class="logo">
            <img src="Logo_FF.gif">
        </div>
        <div class="heading">
            Sign in to your account         
        </div>
        <div id="subwrapper">

            <div class="un">
                Username
            </div>

            <input type="text" size="60">

            <div class="pw">
                Password
            </div>

            <input type="text" size="60">

            <div class="signin">
            <button class="button">Sign in</button>
            </div>

            <div class="checkbox1">
                <input type="checkbox" id="cb">
                <label for="cb">Stay signed in</label>                  
            </div>

            <div class="needhelp">
                 Need Help?
            </div>

        </div>
    </div>

    <footer>
        <div class="footer">
                <ul>
                    <li>Help</li>
                    <li>Terms</li>
                    <li>CompanyInfo</li>                           
                </ul>
        </div>
    </footer>
</body>

</html>

和我完整的CSS代码

.header {
width: 100%;
height: 50px;
margin-bottom: 25;
}
#wrapper{
 width: 800px;
 margin: 0 auto;
float: center;
text -align: center;
}
#wrapper .logo{
margin-top: 25px;
text-align: center;
}
#wrapper .heading{
padding-top: 20px;
font-size: 45px;
color: #e94324;
text-align: center;
}
#wrapper #subwrapper {
width: 400px;
margin: 0 auto;
}
#wrapper #subwrapper .un {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper .pw {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper input{
 padding-top: 5px;
background-color: transparent;
height: 50px;
}
#wrapper #subwrapper .signin{
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
}
#wrapper #subwrapper .button{
background-color: #f26534;
height: 65px;
width: 380px;
font-size: 35px;
/*-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;*/
color: #ffffff;
top: 55%;
}
#wrapper #subwrapper form {
}
#wrapper #subwrapper .checkbox1{
    display: inline-block;         
    float: left; 
    font-size: 20px;
    color: #ffffff;
    position: relative;
}
#wrapper #subwrapper .needhelp{
float: right;
color: #f6ec28;
padding-bottom: 80px;
}
.footer{
height: 20px;
clear: both;
border-top: 1px solid #254A73;
}
.footer ul li{
float: right;
display:inline-block;
margin-right: 20px;
color: #ffffff;
}

我不确定为什么复选框不符合要求。

此致 KJ

Answer 1

这是一个固定复选框对齐问题的小提琴，它只是一个快速解决方案，但您应该尝试考虑您的结构和样式：http://jsfiddle.net/n2b93zaz/2/

#wrapper #subwrapper .checkbox1 {
    display: inline-block;
    float: left;
    font-size: 20px;
    color: #000000;
    position: relative;
}

/*Added this css rule to override the input properties set earlier*/

#wrapper #subwrapper .checkbox1 input{
    height:auto;
}

Answer 2

你的问题：

#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px; //This is your problem. Change height to auto or without value.
}

复选框和标签未正确对齐在不同的代码中相同的单独工作

2 个答案: