搜索结果框中的文本溢出

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>

或者您也可以在overflow:hidden上使用a - 只需删除它的高度，您就不再需要代码了。

---

我使用overflow:hidden为您解决了一个更加可靠的解决方案，并且使用了更多验证器。http://jsfiddle.net/CQzMF/19/也可以查看它。

Answer 2

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

因为那个。元素是浮动的。添加一个clear：在span.seperator下面的div，以展开包含div容器：

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

或从文本中删除浮动。或者更好地将它包装到您使用display设置的范围中：block和float：right。

Answer 3

你的图片链接太长试试缩短它我不得不同意上面的那个人尝试一步一步的代码重构