如果我将元素定位更改为绝对但是它不会“占用任何空间”,我可以让它漂浮在边缘上.
另外,我不介意在浮动位周围设置边框.
任何人有任何想法如何实现这一目标?
解决方法
它看起来像这样:
基本上我所做的是设置float:左边的li然后width:auto on li:hover,这可以确保文本浮动在列边缘上.
然后为了添加边框,我在li之后直接渲染一个伪元素,它继承了前面li的宽度.然后我设置了它的边界,边距,高度和线高,以将这个伪元素定位在前面的li的顶部.我已将margin-left设置为150px,以确保它仅显示在超出列宽度的li后面.
为了在右边添加一些空间,我更改了空白区域:no-wrap to white-space:pre,这将在li内部保留一些额外的空白区域(如果添加,则不是必需的,我添加了它让它看起来更漂亮一点).
这是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内部向上和向下滚动.
原文地址:https://www.jb51.cc/html/227157.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。