Question

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

重叠

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>

问题出在哪里？

编辑：我注意到重叠效应只影响第二个元素的backgorund属性（“Risultati”字通常是浮动的）。我希望从第一个元素的结尾开始，背景占据浏览器的其余空间。相反，它从浏览器左侧开始，第一个元素位于浏览器的左侧。

Answer 1

一个元素是float: left而另一个元素不是;这导致了重叠。尝试将float: left添加到CSS中的#risultati声明：

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

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

1 个答案: