3

私は自分のページにこのコントロールを持っています(関連する HTML と CSS コードを jsfiddle.net にアップロードしました<div style="max-height: X">) 。<fieldset>

ここに画像の説明を入力

ご覧のとおり、小さな問題があります。赤い矢印が指す領域が不自然に空っぽに見えます。スクロール バーは、現在の開始位置よりも 9px 上から開始する必要があります。

position: relative; top: -9px;div とul に追加すると、padding-top: 9pxスクロールしていないときに修正されますが、スクロールを開始すると、奇妙に見え始めます。

ここに画像の説明を入力

これらの両方が必要です：

  • 最初の画像に見られるギャップがあってはなりません (赤い矢印で示されています)。
  • 下にスクロールしたときに 3 番目の画像に見られる重複の問題はありません。
4

9 に答える 9

5

次のようなことを試してください：

http://jsfiddle.net/HerrSerker/WY3dj/165/

フィールドセットの相対位置で凡例の位置を絶対にするだけです。次に、凡例を top/margin-top で上に移動できます

于 2012-09-13T10:51:40.743 に答える
1

これがうまくいくことを願っています..
フィドル-http://jsfiddle.net/WY3dj/197/

于 2012-09-14T07:10:11.997 に答える
1

これはおそらく、HTML/CSS だけで実行でき (その外観にこだわっている場合)、必要に応じて簡単に調整できる、視覚的に一貫したソリューションです。

http://jsfiddle.net/WY3dj/198/

于 2012-09-15T23:50:01.637 に答える
1

スクロール凡例の下にスパンを配置して、「凡例」と「div」の間にレイヤーを作成すると、「div」が非表示になり、スクロール時に「凡例」と重ならなくなります。

このような：

<fieldset class="scroll">
    <legend>Scroll:</legend>
    **<span class="stopoverlap"></span>**
    <div>

これで、次のように「stopoverlap」CSS を作成できます。

.stopoverlap {
    display: block;
    position: absolute;
    height: 5px;
    top: 10px;
    background-color: #ffffff;
    width: 80%;    
    z-index: 2;
}

また、スクロールフィールドセットの下にある「凡例」と「div」の z-index と、次のように相対的な位置を定義する必要があります。

fieldset.scroll div {
    position: relative;
    top: -9px;
    **z-index: 1;**
}

と

legend {
    font-weight: bold;
    margin-left: 5px;
    **position: relative;**
    **z-index : 3;**
}

スクロールは次のようになります。

ここに画像の説明を入力

お役に立てれば

編集: ** をコードに入れないでください。これは、変更または追加を指定するためのものです。

于 2012-09-19T09:53:36.253 に答える
0

ここで、修正しました：http://jsfiddle.net/WY3dj/172/

  • フィールドセット内の 2 つのネストされた div
  • CSSを少し変更しました

テスト 1: Firefox 13

FF13

テスト 2: Internet Explorer 9

IE9

于 2012-09-13T14:15:01.413 に答える
0

fieldset.scroll div からすべてのスタイルを削除する必要があります

于 2012-09-13T08:59:26.197 に答える
0

CSS で、 の値を置き換えて、 のtop: -9pxようにし0pxます。

fieldset.scroll div
{
    position: relative;
    top: 0px;
}

ここでフィドル：http://jsfiddle.net/WY3dj/10/

于 2012-09-06T11:24:45.027 に答える
0

この簡単な解決策を試してください：

http://jsfiddle.net/WY3dj/210/

重複の問題を回避するには、次の要素の CSS スタイルを変更するだけです。

legend
{
    font-weight: bold;
    margin-left: 5px;
    background-color: #fff;
    position:relative;
    z-index:1;
}
于 2012-09-18T08:54:09.183 に答える
0

これらの項目に float:left;clear:both を追加すると、おそらく多くの問題が修正されます。

于 2012-09-18T09:24:46.337 に答える