css - float:left 在 CSS 样式表中不起作用

Question

我将两个div放在一个div中，并浮动其中三个，但里面的两个根本不浮动，即使我输入了CSS代码。有什么我想念的吗？非常感谢你。是我输入错误，还是格式错误。

CSS

#product-viewing {
    float:left;
}

#sign_up { 
    float:left;
}

HTML

<div id="product-viewing">
    <div id="hyperlink">
        <a href="index.html">Home</a> &mdash; <a href="login_sign.html" class="active">Login | Sign Up</a>
    </div>
    <div id="login">
        <h1 class="accounts-title">Customer Login</h1>
        <form method='post' action=''></form> 
    </div>  
    <div id="sign_up">  
        <h1 class="accounts-title">Create Account</h1>
        <form method='post' action='' id='create_customer'></form>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>

Answer 1

像这样

你是对#product-viewing的，但在your html not shown this selector

所以请写#login替换#product-viewing

演示

css

#login {
    float: left;
    background-color:red;
}
#sign_up {
    float: left;
    background-color:yellow;
}

---

演示2

css

#product-viewing {
    float: left;
    background-color:red;
}
#sign_up, #login {
    float: left;
    background-color:yellow;
}

Answer 2

你必须有一个 id="product-viewing" 的 div 才能应用 CSS

Answer 3

添加这个CSS

#sign_up, #login { float:left;}

检查jsfiddle http://jsfiddle.net/7gbNK/56/

Answer 4

我不明白......因为这个#product-viewing {float:left;}毫无意义！

必须添加#login {float:left;}.....如果你想把宽度放在......那样做

#sign_up,#login { float: left;width:50%;}