検索結果ボックスにテキストがオーバーフローする

Question

私はthis tutorialに従うことを試みているが、奇妙なCSSの問題が発生している。私はテキストのオーバーフローの問題が発生している、と私は理由を知らない。最後のspan要素も表示されていません。私はウェブデザイナーではないので、なぜこれが起こっているのか、それを修正する方法についての情報はすばらしいでしょう。

ありがとうございます！

問題の画像

HTML

<div id="suggestions" style="display: block; "> 
    <p id="searchresults"> 
    <a href="/benefits/1" id="1"> 
     <img src="/system/images/benefits/images/1/thumb_download.png?1309194040"> 
     <span class="searchheading">Eric's Awesome Gym</span> 
     <span> 
     At this great gym we strive to make friends. &nbsp;Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by. 
     </span> 
    </a> 
    <span class="seperator"><a href="search?q=eric">Load More Results</a></span> 
    </p> 
</div> 

CSS

#suggestions{ position: absolute; right:73px; width:320px; display:none; } 
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;} 
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; } 
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; } 
#searchresults a img { float:left; padding:5px 10px; } 
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; } 
#searchresults a:hover span.searchheading { color:#ffffff; } 
#searchresults a span { color:#555555; } 
#searchresults a:hover span { color:#f1f1f1; } 
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; } 
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; } 

Answer 1

あなたの要素からの高さを削除し、あなたのフロートをクリア：

http://jsfiddle.net/CQzMF/4/

サンプルのすべてのコードを。

#suggestions{ position: absolute; right:73px; width:320px; display:none; } 
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;} 
#searchresults a { display:block; background-color:#e4e4e4; clear:left;text-decoration:none; } 
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; } 
#searchresults a img { float:left; padding:5px 10px; } 
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; } 
#searchresults a:hover span.searchheading { color:#ffffff; } 
#searchresults a span { color:#555555; } 
#searchresults a:hover span { color:#f1f1f1; } 
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; } 
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; } 
.clear {clear:both;height:1px;font-size:1px;line-height:1px;} 

<div id="suggestions" style="display: block; "> 
    <p id="searchresults"> 
    <a href="/benefits/1" id="1" class="clearme"> 
     <img src="/system/images/benefits/images/1/thumb_download.png?1309194040" width="50" height="100"> 
     <span class="searchheading">Eric's Awesome Gym</span> 
     <span> 
     At this great gym we strive to make friends. &nbsp;Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by. 
     </span> 
     <div class="clear"></div> 
    </a> 
    <span class="seperator"><a href="search?q=eric">Load More Results</a></span> 
    </p> 
</div> 

代わりに、あなたはまた、aにoverflow:hiddenを使用することができます - ちょうどそれからの高さを削除して、あなたはコードではもう必要ありません。

---

私はoverflow:hiddenを使用して、あなたにもう少し固溶体を固定し、もう少しバリ優しい：http://jsfiddle.net/CQzMF/19/もそれをチェックアウト。

Answer 2

#searchresults a img { float:left; padding:5px 10px; } 

そのためです。要素は浮動しています。 span.seperatorの下に両方のdivを含むdivのコンテナを展開する：

<div style="clear:both">&nspb;</div> 

を右またはテキストからフロートを削除するには、clearを追加します。または、ディスプレイでスタイルを設定するスパンに適切にラップします。ブロックと浮動小数点：right。

Answer 3

上記