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

我在Firefox中没有浮动的复选框时遇到问题。我究竟做错了什么？为什么这个元素不会在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-掘金我交替建议/加这一点，并把周围的复选框一个div，但是这给了我同样的结果。

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

来源

2012-09-06 vo1d

它“是”向左浮动。这可能不是你期望的地方，因为它的宽度与其他输入（200px）相同，所以200px框向左浮动，但实际的复选框位于该框的中心。把它放在你想要的地方需要特定的CSS，并且可能需要封装它。 –

请将您的代码放入帖子中。否则，当链接失效时，这个问题对其他人来说毫无用处。 – Sparky

喜更换标签的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-06 11:12:02

谢谢，这没有什么不同。 – vo1d

我改变了你的doctype到html5，我得到了我期待的结果。

由于过渡文档类型把它放在怪癖模式，所以最好避免它们，除非有很大的理由使用它。

来源

2012-09-06 00:20:42

没有区别:-( – vo1d

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

来源

2012-09-06 01:28:48 Snger

这不起作用： -/ – vo1d

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

回答

相关问题