html – 如何在moused结束时使文本浮动到列上？

我已经有了它,并提出了一个不需要任何标记更改的解决方案,我已经做了一些测试,它似乎适用于Chrome 26,Safari 5.1.7,Firefox 20,IE10,IE10在IE9模式和IE8模式的IE10中,它在所有这些浏览器和浏览器模式下看起来都一样,在IE7模式下使用IE10时它会开始中断.

它看起来像这样：

基本上我所做的是设置float：左边的li然后width：auto on li：hover,这可以确保文本浮动在列边缘上.

然后为了添加边框,我在li之后直接渲染一个伪元素,它继承了前面li的宽度.然后我设置了它的边界,边距,高度和线高,以将这个伪元素定位在前面的li的顶部.我已将margin-left设置为150px,以确保它仅显示在超出列宽度的li后面.

为了在右边添加一些空间,我更改了空白区域：no-wrap to 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;
}

UPDATE

我已将Micro clearfix hack包含在div中,现在它根据其内容调整其高度,而不是具有固定高度.

更新2

滚动的问题是,当在子元素上设置width：auto时,包含元素的宽度实际上正在改变,因为滚动条在右侧,它一直在移动.我尝试过使用额外的包装器div,但似乎无法在创建滚动条的元素内的任何位置浮动滚动条顶部的东西.我可以滚动的唯一方法是设置溢出：隐藏在ul上,然后使用jQuery ScrollTo插件在ul内部向上和向下滚动.

Example jsFiddle with scrolling