Question

（jsFiddle example）

我有一个<ul>，其<li>与右边对齐。我希望它们的位置使得<ul>的右侧只显示大约20px的元素，并且在悬停时它们会进入正常位置。这将与容器上的overflow: hidden;结合使用，因此元素部分隐藏，从侧面开始并从侧面滑入（使用CSS3过渡）。

在这个jsFiddle example中（overflow: visible为了说明）我能够将元素滑动到正确的位置，但是如何对齐它们以使它们在容器内放置20px以开始？我能做的最好的事情就是让它们保持正确对齐并将它们一直推到容器外面。

我玩过更改元素的宽度，但是如果它们包含多个单词，则文本换行并且高度发生变化（或者overflow: hidden，当宽度太小时，单词就会消失），这是不可接受的。< / p>

如果需要，使用固定宽度<li>是可以接受的（但不太有趣且不太可取），但我希望看到其他解决方案。

Answer 1

如果UL本身具有固定宽度，您可以定位UL左侧的LI（{UL_width} - 20）像素。我可能会做点像......

<ul>
    <li><span>Item #1</span></li>
    <li><span>Item #2</span></li>
</ul>
...

以下CSS应该能为您提供所需的效果......

ul { width: 200px; }
ul li {
    position: relative;
    height: 15px;
    overflow: hidden;
}
ul li span {
    position: absolute;
    top: 0;
    left: 180px;
}

沿着这些方向做某事应该可以解决问题。然后只需进行翻转即可调整ul li span的左侧属性。

新CSS

ul { width: 200px; }
ul li {
    width: 200px;
    text-indent: 180px;
    height: 15px;
    overflow: hidden;
}

如何将元素放在容器外面~20px显示？

1 个答案: