0

我有一个宽度可变的 div，具体取决于其内容。我想将它用于当用户单击它时从页面一侧滑入的菜单栏，因此它必须伸出。我希望它准确地伸出 16 像素（因为箭头图像具有那个大小），无论它实际上有多宽。如果不使用 JavaScript，我怎么能意识到这一点？

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

4

3 回答 3

0

http://jsfiddle.net/LruWn/

No matter how long the .box is, it will always overlap the .container only by exactly 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;
}​

Add overflow: hidden; to .container to see how it might look like in action.

于 2012-09-24T18:56:58.913 回答
0

最简单的方法是在折叠时向菜单项添加另一个类，并在那里设置另一个宽度和文本缩进（而不是在新类中再次编写所有 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不知道你什么时候点击一个元素）

于 2012-09-24T18:45:15.893 回答
0

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

于 2012-09-30T16:58:16.143 回答