html - 可変幅の要素を常に特定の幅で突き出すようにするにはどうすればよいですか？

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

要素の幅を変更することで問題を解決しました。愚かな私。