3

我的页面上有这个控件（我<div style="max-height: X">在jsfiddle.net 上上传了相关的 HTML 和 CSS 代码）。<fieldset>

在此处输入图像描述

如您所见，有一个小问题：红色箭头所指的区域看起来异常空旷。滚动条的开始位置应该比现在开始的位置高 9px！

当你不滚动时，添加position: relative; top: -9px;到 div 和ul 会修复它，但是一旦你开始滚动，事情就会开始看起来很奇怪：padding-top: 9px

在此处输入图像描述

我需要这两个：

  • 不应该有您在第一张图片中看到的间隙（由红色箭头指向）
  • 向下滚动时，第三张图片中不应出现重叠问题
4

9 回答 9

5

尝试这样的事情：

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

只需将图例的位置设为绝对位置，字段集的位置相对；然后你可以用 top/margin-top 将你的图例移到顶部

于 2012-09-13T10:51:40.743 回答
1

这是一个视觉上一致的解决方案，它可能是单独使用 HTML/CSS 可以完成的最好的解决方案（如果您坚持使用这种外观）并且可以根据需要轻松调整。

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

于 2012-09-15T23:50:01.637 回答
1

您可以将 span 放在滚动图例下方，在“legend”和“div”之间创建一个图层，以便它隐藏“div”并且不与滚动上的“legend”重叠。

像这样：

<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;
}

您还必须在滚动字段集下定义“legend”和“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 回答
1

我希望这有效..
小提琴 - http://jsfiddle.net/WY3dj/197/

于 2012-09-14T07:10:11.997 回答
0

您需要从 fieldset.scroll div 中删除所有样式

于 2012-09-13T08:59:26.197 回答
0

为这些项目添加 float:left;clear:both，可能会解决很多问题。

于 2012-09-18T09:24:46.337 回答
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

在 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/172/

  • 字段集中的两个嵌套 div
  • 稍微改变了你的 CSS

测试 1：火狐 13

FF13

测试 2：Internet Explorer 9

IE9

于 2012-09-13T14:15:01.413 回答