7

これは、私がやろうとしていることの一種の大まかな図です。十分に説明できない場合は、フィドルを一緒に投げることができます。

ここに画像の説明を入力

黒いボックスは a<div>で、ピンクのボックスも div です。私が望むのは、それらがタブのように見えることです。そのため、アクティブな場合、タブで重要な「ブリッジ」効果を与える親の境界線を覆います。

境界を覆うように、アクティブなものをもう少し広くすることができると思いました. 問題はoverflow-x: hidden;、幅の広い部分が黒いアウトラインの「下」にあり、自動または表示を行うと、スクロールできるようになることです。

重要なことの 1 つは、ピンクには相対的な位置が必要なことです。

私は何を間違っていますか？

編集：最も重要な部分について言及するのを忘れていました。ブラックボックスにはoverflow-y: hidden. それがなければ、以下のメソッドは正常に機能しますが、追加すると元の状態に戻ります

4

4 に答える 4

5

多分このアプローチはあなたを助けるでしょう：

.main {text-align: right;border: 10px solid #000;}
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;}
.main > .selected > div {margin-right: -10px;padding-left: 10px;}
<div class="main">
    <div class="selected"><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

于 2013-04-23T23:13:25.550 に答える