0


0

アンカータグがdivコンテンツを上方にシフトしないようにする方法

アンカータグがdivを上にシフトするという奇妙な問題があり、それがかなり頭痛の種になりますが、ミックスには非常に多くの異なる部分があるため、どちらが問題を引き起こしているのかわかりません。 jQuery UIライブラリのモーダルダイアログボックスを使用して水平アコーディオンスタイルメニューを表示するUIを作成しようとしています。 コードの基本的な形式は次のとおりです。

             Header






        ...

各カードをクリックすると、現在展開されているカードの幅が縮小し、新しいカードの幅が拡大するように設計されています。 これはすべて、jQueryの支援を受けたJavaScriptで行われます。 各カードの追加コンテンツはcssのoverflow:hiddenによって非表示になり、縮小されるとカード内のヘッダーdivのみが表示されます。 関連するcssは次のとおりです。

ul {
list-style: none;
margin: 0;
padding: 0;
}

div.profilePanel {
    display: none;
}

div.profilePanel li {
    float: left;
}

div.profilePanel li div.card {
    overflow: hidden;
    height: 375px;
    width: 30px;
    background-color: #e0f3fb;
    padding: 0px 2px 2px 0px;
}

div.profilePanel li p {
margin: 0;
padding: 0;
display: block;
margin-left: 35px;
}

div.header {
    border-width: 1px;
    border-style: solid;
    border-color: red;
    display: block;
    float: left;
    width: 30px;
    height: 100%;
    cursor: pointer;
}

div.content {
    padding: 5px 10px;
    height: 365px;
    overflow: auto;
}
div.content li {
    display: block;
    float: none;
}

h1 {
    float: left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    direction: rtl;
    font-size: 14pt;
    margin-top: 5px;
    white-space: nowrap;
    width: 30px;
    text-align: center;
    overflow: visible;
}

コンテンツdivにアンカータグが含まれていない場合(つまり、 アンカータグを取得し、それらをスパンに名前変更して、機能がなければ適切なフォーマットを取得できます)メニューが期待どおりに表示されます。 各ヘッダーはカード全体のサイズを占め、すべてがカード内で適切にフォーマットされます。 ただし、コンテンツdivにアンカータグが含まれている場合、ヘッダーとコンテンツdivの両方がページ上でシフトされます。 firebugを使用すると、カードdivは実際には移動していませんが、ヘッダーとコンテンツは移動していることがわかります。 これはモーダルダイアログボックスにあるため、それと関係があると思いましたが、2つのdivは、ダイアログボックスのドラッグ先に関係なく、ダイアログボックスの位置に対してシフトしているようです。

1 Answer


0


まず、HTMLのどこかに、profilePanelのクラスを持つDIVがあると想定しています。

また、アンカーの位置に影響するCSSルールはないものと想定しています。 \ {margin-top:20px;}

ここで間違えられるかもしれませんが、間違ったCSSプロパティを使用していると思います。 オーバーフローの代わりにdisplay:noneを使用する方が良いと思います。 Display:noneは文字どおり要素を非表示にしますが、overflow:hiddenはサイズを超える要素のコンテンツのみを非表示にします。

ただし、JavaScriptが表示されない場合、実際の問題を説明することはできません。