7

当我将鼠标悬停在列边缘时，我想让一些文本漂浮在列边缘上，就像我的 IDE 一样：

这是我到目前为止所得到的。

如果我将元素定位更改为，我可以让它漂浮在边缘上，absolute但它不会“占用任何空间”。

另外，我也不介意在浮动位周围设置边框。

任何人有任何想法如何做到这一点？

4

2 回答 2

6

我找到了两种支持这一点的方法。第一个要求您在每个 li 中添加 span 标签，但它似乎适用于所有浏览器。第二个完全按照您的方式使用标记，但不适用于 chrome 和 safari。

所有浏览器：

http://jsfiddle.net/vkBqg/1/

这个解决方案非常简单，基本上可以归结为：

li {
   white-space: nowrap;
   overflow-x: hidden;
   width: 150px;
}

li:hover {
    overflow-x: visible;
}

除了基于 webkit 的浏览器（chrome、safari）之外的所有浏览器：

http://jsfiddle.net/aeARH/1/

这更hackier，需要你改变li的宽度和显示类型，然后强制它换行。li:hover 看起来像这样：

overflow-x: auto;
width:auto;
content:"\A";
display:inline;

这两者的要点应该是 position:absolute 当你试图保持元素之间的自然顺序时效果不佳。

于 2013-04-20T04:41:37.590 回答
2

我已经尝试过了，并提出了一个根本不需要任何标记更改的解决方案，我已经做了一些测试，它似乎可以在Chrome 26、Safari 5.1.7、Firefox 20、IE10、IE10 中工作在 IE9 模式和IE10 在 IE8 模式下，在所有这些浏览器和浏览器模式下看起来都一样，在 IE7 模式下使用 IE10时开始崩溃。

它看起来像这样：

浮动在列边缘的文本

基本上我所做的是设置float:leftonli然后width:autoon li:hover，这样可以确保文本漂浮在列边缘上。

然后添加边框，我在 之后直接渲染一个伪元素li，它继承了前面的宽度li。然后我设置了它的边框、边距、高度和行高，以将这个伪元素放在前面的li. 我已将 设置margin-left为150px以确保它仅显示在li超过列宽的 's 后面。

为了在右侧添加一些空间，我将 更改white-space: no-wrap为white-space: pre，这将在 内部保留一些添加的空白li（如果添加，则不是必需的，我确实添加了它以使其看起来更漂亮一些）。

这是一个jsFiddle。

这是HTML：

<div>
  <ul>
    <li>some really long text </li>
    <li>some text that doesn't fit into the column width </li>
    <li>yeah dude, this is sample text </li>
    <li>woot woot! double rainbows </li>
  </ul>
</div>

这是CSS：

li {
  white-space: pre;
  overflow-x: hidden;
  background-color: #f2f2f2;
  line-height: 21px;
  width: 150px;
  float: left;
  clear: both;
}
li:hover:after {
  content:'';
  height: 19px;
  margin: -21px 0px 0px 150px;
  border-width: 1px 1px 1px 0px;
  border-style: solid;
  display: block;
}
li:hover {
  width: auto;
}
div {
  width:155px;
  border-right: 3px solid;
  background-color: #f2f2f2;
}
ul:before, ul:after {
  content:' ';
  display: table;
}
ul {
  list-style: none;
  padding: 5px 0 5px 5px;
  margin: 0;
}
ul:after {
  clear: both;
}
body {
  margin: 0;
  padding: 0;
}

更新

我在 中包含了Micro clearfix hack，div现在它根据内容调整高度，而不是固定高度。

更新 2

滚动的问题在于，在子元素上设置时，包含元素的宽度实际上是在变化width:auto的，因为滚动条在右边，它一直在移动。我尝试使用额外的 wrapper div，但似乎不可能从创建滚动条的元素内部的任何位置将内容浮动到滚动条的顶部。我可以让它滚动的唯一方法是设置overflow:hidden，ul然后使用jQuery ScrollTo插件在ul.

带有滚动的示例 jsFiddle

于 2013-04-20T09:48:09.733 回答