Html 搜索结果框中的文本溢出_Html_Css

Html 搜索结果框中的文本溢出

html css

Html 搜索结果框中的文本溢出,html,css,Html,Css,我试着跟随，但我遇到了一个奇怪的css问题。我遇到了一个文本溢出问题，我不知道为什么。最后一个span元素也未显示。我不是一个网页设计师，所以任何关于为什么会发生这种情况以及如何修复的信息都是非常棒的谢谢问题的形象 HTML 正因为如此。元素是浮动的。在span.separator下面添加一个clear:tware div以展开包含div的容器： <div style="clear:both">&nspb;</div> &nspb；或者从文本中删除右浮

我试着跟随，但我遇到了一个奇怪的css问题。我遇到了一个文本溢出问题，我不知道为什么。最后一个

span

元素也未显示。我不是一个网页设计师，所以任何关于为什么会发生这种情况以及如何修复的信息都是非常棒的

谢谢

问题的形象

HTML

正因为如此。元素是浮动的。在span.separator下面添加一个clear:tware div以展开包含div的容器：

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

&nspb；

或者从文本中删除右浮动。或者最好将其包装成一个跨度，并使用display:block和float:right设置样式

正因为如此。元素是浮动的。在span.separator下面添加一个clear:tware div以展开包含div的容器：

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

&nspb；

或者从文本中删除右浮动。或者最好将其包装成一个跨度，并使用display:block和float:right进行样式设置。

从a元素中删除高度并清除浮动：

示例中的所有代码

#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>

#建议{位置：绝对；右侧：73px；宽度：320px；显示：无；}
#搜索结果{边框宽度：1px；边框颜色：#919191；边框样式：纯色；宽度：320px；背景色：#a0a0a0；字体大小：10px；线条高度：14px；边距：0；}
#搜索结果a{显示：块；背景色：#e4；清除：左；文本装饰：无；}
#搜索结果a：悬停{背景色：#b7b7b7；颜色：#ffffff；}
#searchresultsaimg{float:left；padding:5px10px；}
#searchresults a span.searchheading{display:block；font-weight:bold；padding-top:5px；color:#191919；}
#搜索结果a:hover span.searchheading{color:#ffffff；}
#搜索结果为span{color:#555555；}
#搜索结果a:悬停span{color:#f1f1；}
#搜索结果span.separator{float:right；padding right:15px；margin right:5px；}
#搜索结果span.separator a{背景颜色：透明；显示：块；边距：5px；高度：自动；颜色：#ffffff；}
.clear{clear:两者；高度：1px；字体大小：1px；行高：1px；}

或者，您也可以在

上使用

overflow:hidden

——只需从中删除高度，代码中就不再需要a

我使用

溢出：隐藏和更友好的验证器为您修复了一个更稳定的解决方案。请检查它。
删除a元素的高度并清除浮动：

示例中的所有代码
#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>

#建议{位置：绝对；右侧：73px；宽度：320px；显示：无；}
#搜索结果{边框宽度：1px；边框颜色：#919191；边框样式：纯色；宽度：320px；背景色：#a0a0a0；字体大小：10px；线条高度：14px；边距：0；}
#搜索结果a{显示：块；背景色：#e4；清除：左；文本装饰：无；}
#搜索结果a：悬停{背景色：#b7b7b7；颜色：#ffffff；}
#searchresultsaimg{float:left；padding:5px10px；}
#searchresults a span.searchheading{display:block；font-weight:bold；padding-top:5px；color:#191919；}
#搜索结果a:hover span.searchheading{color:#ffffff；}
#搜索结果为span{color:#555555；}
#搜索结果a:悬停span{color:#f1f1；}
#搜索结果span.separator{float:right；padding right:15px；margin right:5px；}
#搜索结果span.separator a{背景颜色：透明；显示：块；边距：5px；高度：自动；颜色：#ffffff；}
.clear{clear:两者；高度：1px；字体大小：1px；行高：1px；}



或者，您也可以在a
上使用overflow:hidden
——只需从中删除高度，代码中就不再需要a

我用溢出：隐藏和更友好的验证器解决了你的问题。：也检查一下。
你的图像链接太长，请尝试缩短它，我必须同意上面的人，尝试一步一步的代码重构你的图像链接太长，请尝试缩短它，我必须这样做同意上面的观点，尝试一步一步的代码重构
Perfect。在我复制的代码中甚至没有注意到这个高度。谢谢。@Eric Koslow-也检查溢出：隐藏解决方案-在您的情况下效果更好-也更少html。如果你不打算做更多的绝对定位的偏移div，它比使用cleardiv要好。我刚刚注意到“分隔符”span
现在仍然出现，即使在你的例子中也是如此。你可以看看我链接到的教程，看看它应该是什么样子。再次感谢。@Eric Koslow-使用这个-删除一些你并不真正需要的东西：太棒了。非常感谢，太好了。在我复制的代码中甚至没有注意到这个高度。谢谢。@Eric Koslow-也检查溢出：隐藏解决方案-在您的情况下效果更好-也更少html。如果你不打算做更多的绝对定位的偏移div，它比使用cleardiv要好。我刚刚注意到“分隔符”span现在仍然出现，即使在你的例子中也是如此。你可以看看我链接到的教程，看看它应该是什么样子。再次感谢。@Eric Koslow-使用这个-删除一些你并不真正需要的东西：太棒了。非常感谢你。
#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>