0

ブラウザウィンドウ全体を占める単純なページを作成しようとしています。2 つの要素が含まれています。問題は、2 番目の要素が最初の要素と重なっているということです。

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>

問題はどこだ？

編集: オーバーラップは 2 番目の要素の backgorund プロパティのみに影響することに注意しました (「Risultati」という単語は通常、フローティングされます)。背景は、最初の要素の終わりから始まるブラウザーの残りのスペースを占めると思います。代わりに、最初の要素が配置されているブラウザーの左側から開始します。

4

1 に答える 1

3

一方の要素はfloat: leftそうですが、もう一方の要素はそうではありません。これが重なりを引き起こしています。CSS の宣言に追加float: leftしてみてください。#risultati

#risultati 
{
    width:70%;
    background-color:#0099FF;
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float: left;
}
于 2013-02-08T16:55:38.663 に答える