2

アクティブなメニュー項目が右側のコンテンツdivと出会う左側の境界線を削除しようとしています。

http://d.pr/i/hfRZ+を参照してください

したがって、アクティブな要素は、このhttp://dribbble.com/shots/663779-Left-navigationのように、メインコンテンツのdivと同じレベルであるように見えます。

重要な場合は、twitterブートストラップを使用しています。

どんなポインタでも大歓迎です！

編集：ここにHTML/CSSへのリンクがあります

表示： http ：//codepen.io/anon/full/Asrnm

http://codepen.io/anon/pen/Asrnmを編集します

4

4 に答える 4

4

境界線を部分的に削除することはできません。境界線を覆うことしかできません。選択したアイテムを境界線に重ねる必要があります (または、境界線の上に別の要素を配置するスクリプトが必要です)。

于 2012-09-20T19:09:53.620 に答える
3

私は一緒にデモを平手打ちしました: http://dabblet.com/gist/3762742

:after を幅 1 ピクセル、親の背景色で使用して、右ボックスの境界線に重ねます。

于 2012-09-21T18:43:48.897 に答える
0 
.selected-item {
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px
}
于 2016-02-02T14:02:06.973 に答える
0

選択したアイテムに上下の境界線のみを持たせることができます

.selected-item
{
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

また

.selected-item
{
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 0px;
    border-right: 0px;
}

ボックスの影が親コンテナをエスケープするのを避けるために、代わりにそれを次のように置き換えることができます

.selected-item:after
{
    display: block;
    position: absolute;
    height: 10px;
    background: url("gradient.gif") top left repeat-x;
}

そうすれば、要素の下に一貫した水平の影ができ、親要素とその境界線までは行きますが、それを超えることはありません。

于 2012-09-20T19:16:10.137 に答える