Question

我有一个具有可变宽度的div，具体取决于其内容。我想将它用于菜单栏，当用户点击它时，它会从页面侧面滑入，因此必须坚持下去。我希望它能够精确地突出16px（因为箭头图像具有那么大的尺寸），无论它实际上有多宽。如何在不使用JavaScript的情况下实现这一点？

修改：谢谢你的回答！但是我想到我可以像在网站上使用导航栏那样做 - 修改宽度而不是滑动它。见这里：http://dev.mezgrman.de/tagwall/

Answer 1

最简单的方法是在折叠时将另一个类添加到菜单项中，并在那里设置另一个宽度和一个文本缩进（而不是再次写入新类中的所有css）

.collapsed {
    width: 16px;
    text-indent: -9999px;
    background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}

现在，您在javascript中唯一需要做的就是根据用户的点击添加和删除该类。（你不会摆脱javascript。因为css不知道你何时点击一个元素）

Answer 2

http://jsfiddle.net/LruWn/

无论.box是多长时间，它总是与.container完全重叠16px：

HTML：

<div class="container"><div class="box">text</div></div>

的CSS：

.container {
    position: relative;
    outline: 1px solid red;
    width: 100px;
    height: 100px;
}
.box {
    width: 70px;
    position: absolute;
    left: 100%;
    margin-left: -16px;
    outline: 1px solid black;
}

将overflow: hidden;添加到.container以查看其实际效果。

Answer 3

我现在通过修改元素的宽度解决了我的问题。傻我。

如何制作宽度可变的元素总是伸出特定的宽度？

3 个答案:

HTML：

的CSS：