Html 浮动元素第一个元素与第二个元素重叠_Html_Css_Css Float

Html 浮动元素第一个元素与第二个元素重叠

html css

Html 浮动元素第一个元素与第二个元素重叠,html,css,css-float,Html,Css,Css Float,我试图做一个简单的页面，占据整个浏览器窗口。它主要包含两个元素，问题是第二个元素与第一个元素重叠 form { background-color:#996600; width:30%; height:100%; float:left; font:"Arial Black", Gadget, sans-serif; color:#FFF } #risultati { width:70%; background-color

我试图做一个简单的页面，占据整个浏览器窗口。它主要包含两个元素，问题是第二个元素与第一个元素重叠

form 
{
    background-color:#996600;
    width:30%;
    height:100%;
    float:left;    
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF
}

#risultati 
{
    width:70%;
    background-color:#0099FF;
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF
}


<body>

<form action"">
 <label>Inserisci ragione sociale</label>
   <input name="chiave" onkeyup="showHint(this.value)"/>

 <!-- <input type="submit"/> -->
</form>

<p id="risultati">Risultati: <span id="txtHint"></span></p> 


</body>

表单
{
背景色：#996600；
宽度：30%；
身高：100%；
浮动：左；
字体：“Arial黑色”，小工具，无衬线；
颜色：#FFF
}
#利苏尔蒂
{
宽度：70%；
背景色：#0099FF；
字体：“Arial黑色”，小工具，无衬线；
颜色：#FFF
}
社会保险
risultati:

问题在哪里

编辑：我注意到重叠只影响第二个元素的backgorund属性（“Risultati”字通常是浮动的）。

我希望从第一个元素的结尾开始，背景占据浏览器的其余空间。相反，它从浏览器左侧开始，第一个元素位于该位置。

一个元素是

float:left

，而另一个元素不是；这导致了重叠。尝试将

float:left

添加到CSS中的

#risultati

声明中：

#risultati 
{
    width:70%;
    background-color:#0099FF;
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float: left;
}

一个元素是

浮动：左，而另一个元素不是；这导致了重叠。尝试将float:left
添加到CSS中的#risultati
声明中：
#risultati 
{
    width:70%;
    background-color:#0099FF;
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float: left;
}

天哪，成功了。。我发誓在发布anwer之前已经尝试过这个解决方案，但没有成功。感谢您的帮助，并为noobish问题感到抱歉：（无论如何，它不是完美的。第二个元素与第一个元素不一致，但它在OMG下定位了一行它起了作用。我发誓在发布anwer之前已经尝试过此解决方案，但没有起作用。感谢您的帮助，并为noobish问题感到抱歉：（无论如何，它不是完美的。第二个元素没有与第一个元素对齐，但它的位置在下面一行。）