0

我在 Firefox 中没有浮动的复选框有问题。我究竟做错了什么？

现场示例：http: //jsfiddle.net/3zhrD/

<!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;
    }
4

3 回答 3

2

嗨替换标签和复选框的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;}
于 2012-09-06T11:12:02.660 回答
0

我将您的文档类型更改为 html5，并得到了预期的结果。

由于过渡文档类型将其置于怪癖模式，因此最好避免使用它们，除非有充分的理由使用它。

于 2012-09-06T00:20:42.237 回答
0

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

于 2012-09-06T01:28:48.037 回答