6

我有一个在浮动列表中显示的项目列表，列表中的每个项目都具有固定宽度，因此每行有两个。防止这种可怕事情发生的最佳做法是什么：

替代文字 http://x01.co.uk/floated_items.gif

可能性：

  • 在显示数据之前修剪到指定数量的字符。需要猜测有多少字符是“安全的”。
  • 溢出：隐藏。哈基。
  • 删除背景，每个项目只有一个顶部边框。

可能但很愚蠢：

  • 通过溢出在每个项目中都有一个滚动条：自动，这看起来很可怕。
  • 将背景图像添加到容器中。不能保证总是有相同数量的项目，所以这个选项不可用。

对这个恼人的问题的任何帮助表示赞赏！

4

6 回答 6

2

您是否使用固定字体大小，即以 px 为单位指定？如果不是，您还需要考虑每个浏览器的各种文本大小选项，这可能会使修剪字符串的概念变得多余。如果它已修复，那么可能会查看您可以放入多少个 W 并将您的文本限制为该 -3 并附加一个省略号，不确定该列表的用途，所以这是一种方法。

就我个人而言，我可能会使用溢出：隐藏，因为它涵盖了所有可能发生的情况并确保它始终保持您的布局一致。

我想最后一个选择是严格控制可以添加到列表中的内容，并首先防止问题发生。正如他们所说，预防胜于治疗，尽管可能无济于事。

于 2008-11-06T16:26:43.833 回答
1

有一些脚本可以通过比较两个块中的 li 并使它们都等于最高的来帮助解决这个问题。

通常，与其从 css 的角度思考什么是最好的，不如考虑你想要什么样的演示文稿，然后让 css/JavaScript 达到你想要的效果。

如果这只是您想要的，请考虑使用渐变背景图像突出显示 li 的顶部并建议该块而不实际填充它。

添加链接到 jQuery 解决方案：均衡

于 2008-11-06T16:32:07.210 回答
0

一种解决方案是使用基于 alpha 的 PNG，它会在最后 10px 左右将文本慢慢淡化为容器的背景色。如果某些文本比长文本短得多，那看起来会很好，但是在文本等于容器的情况下，它可能看起来有点傻。

当然，结合 display: hidden 和 white-space: no-wrap

于 2008-11-06T16:51:48.730 回答
0

从可访问性的角度来看，简单地隐藏标题并不是一个好主意，因为这可能会隐藏因视力不佳而增加字体大小的人的内容。当你的设计被糟糕的分辨率或类似的障碍物击中时，它应该能够漂浮，即使它漂浮在不那么令人赏心悦目的东西上。

现在，如果我正确理解您的背景图像问题，我相信您的问题可以使用 ALA 关于滑动门的文章中描述的技术来解决，其中背景图像随内容扩展。

于 2008-11-07T11:22:06.757 回答
0

这里有一些争议给你..使用桌子？

听起来您对我来说有一个数据网格，表格可以为您解答这个问题吗？

它还提出了一个问题，您是否真的希望这些项目具有相同的高度，或者只是在它们后面有相同数量的黑色背景？您可以将黑色应用于行的背景，然后创建带有边框和边距的中心白色分隔符。

于 2008-11-07T11:26:36.577 回答
0

您可以尝试使用：

ul li{
  display:block;
  float:left;
  width:6em;
  height:4em;
  background-color:black;
  color:white;
  margin-right:1em;
}
ul{
  height:100%;
  overflow:hidden;
}
div{
  height:3em;
  overflow:hidden;
  background-color:blue;
}

虽然不知道跨浏览器一致性。编辑：这是我假设的 html：

<div>
<ul>
<li>asdf
<li>asdf trey  tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>
于 2008-11-08T17:43:52.370 回答