Html 如何使可变宽度的元素始终突出特定的宽度？

我有一个div，它的宽度是可变的，这取决于它的内容。我想用它作为一个菜单栏，当用户点击它时，它会从页面的侧面滑入，所以它必须突出。我希望它能精确地突出16px（因为箭头图像有那个尺寸），不管它实际上有多宽。 如果不使用JavaScript，我如何实现这一点

编辑： 谢谢你的回答！但我突然想到，我可以像在那个网站上使用导航栏一样，修改宽度，而不是将其滑入。

---

请参见此处：

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

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

无论.box有多长，它始终仅与.container重叠16px：

html:

---

添加

溢出：隐藏

到

.container

查看它在运行时的样子。

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

也许你可以给我们一个到目前为止你所拥有的链接，或者你可以用这个来代替：很难想象你到底想要做什么。当然。项目是这样的：太棒了！而且这个概念非常有趣！你是说标签墙的概念还是什么？墙的概念！继续…：）

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

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

.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;
}​