Question

我遇到了一个没有在Firefox中浮动的复选框。我做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Example</title>
        <style type="text/css">
body {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
p, h1, form, button {
    border:0;
    margin:0;
    padding:0;
}
.spacer {
    clear:both;
    height:1px;
}
/* ----------- My Form ----------- */
.myform {
    margin:0 auto;
    width:400px;
    padding:14px;
}
/* ----------- stylized ----------- */
#stylized {
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}
#stylized p {
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label {
    display:block;
    font-weight:bold;
    text-align:right;
    width:140px;
    float:left;
}
#stylized .small {
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input { /*260*/
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 10px 2px 10px;
}
#stylized .checkbox {
    margin:2px 10px 28px 10px;

}
#stylized button {
    clear:both;
    margin-left:150px;
    width:125px;
    height:31px;
    background:#666666 url(img/button.png) no-repeat;
    text-align:center;
    line-height:31px;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
}
</style>
        <script type="text/javascript">
            function CredentialsReadonlyToggle() {
                if(document.getElementById("CredToggle").checked){
                    document.getElementById("username").disabled=true;
                    document.getElementById("password").disabled=true;
                }
                else
                {
                    document.getElementById("username").disabled=false;
                    document.getElementById("password").disabled=false;
                }
            }
        </script>
        </head>
        <body>
        <div id="stylized" class="myform">
          <form id="form" name="form" method="post" action="index.html">
            <h1>Select Source</h1>
            <p>This is the basic look of my form without table</p>

            <label>URL <span class="small">URL of Remote Adress</span> </label>
            <input type="text" name="url" id="url" />

            <label>Password? <span class="small">Source requieres password</span> </label>
            <input type="checkbox" onclick="CredentialsReadonlyToggle();" id="CredToggle" class="checkbox"/>

            <label>Username <span class="small">for remote source</span> </label>
            <input type="text" name="username" id="username"/>

            <label>Password <span class="small">for remote source</span> </label>
            <input type="password" name="password" id="password"/>
            <button type="submit">Weiter</button>
            <div class="spacer"></div>
          </form>
        </div>

</body>
</html>

根据 G-Nugget 的建议，我在css中交替/添加了这个，并在复选框旁边放了一个div，但这给了我相同的结果。

#stylized .checkbox {
    float: left;
    margin-left: 0px;
}
#stylized div{
    margin:2px 10px 28px 10px;
    float:left;
    border:solid 1px #000;
    }

Answer 1

嗨替换标签的CSS和复选框，如下所示。宽度需要重置为复选框，因为您已经输入200px宽度。改变了jsfiddle并在Firefox 15和chrome上进行了测试。

#stylized label {
display:block;
font-weight:bold;
text-align:right;
width:145px;
clear:left;
float:left; }

#stylized .checkbox {
margin:2px 10px 28px 10px;
width:15px;}

Answer 2

我将你的doctype改为html5，我得到了我预期的结果。

由于过渡性文档将其置于怪癖模式，因此除非有极大的理由使用它们，否则最好避免使用它们。

Answer 3

添加以下代码：#stylized label {clear:both;}

为什么这个元素在Firefox中不会浮动？

3 个答案: