5

我创建了一个运行良好的 jQuery Sliding Drilldown 插件，除了一个部分：箭头的定位。如果我更改它们包含的元素的字体大小/行高，它们就会移动，这对我来说没有意义。谁能告诉我为什么？line-height 实际上会影响元素中 0,0 的位置吗？还是我错过了其他事情？

而且 - 这是真正的问题 - 我可以用CSS做我想做的事情吗？我知道我可以使用 JavaScript 动态定位它们，但我试图避免这种情况。

这是一个非常简单的页面上的插件：

http://thomporter.github.com/jquery-sliding-ajax-drilldown/demos/basic-plain.html

如果您愿意，还可以查看我用来生成 CSS的Sass ，它位于 repo 中：

https://github.com/thomporter/jquery-sliding-ajax-drilldown/blob/master/src/lib/css/jquery.sliding-ajax-drilldown.scss

4

4 回答 4

2

刚刚做了一些测试，这是因为您使用 em 到绝对位置。例如，如果将其更改为 px，并修复同样基于 em 的 padding-left，则在更改字体大小时箭头会停止移动。

于 2012-10-10T03:59:16.380 回答
2

您的问题在于您设置font-size了<a>标签，这些标签都设置为display:block并容纳了您需要的其他元素。

em当您增加<a>元素中的字体大小时，会展开。由于您的箭头图像也嵌套在您的<a>元素中并且是绝对定位的，因此如果容器框改变大小，箭头的位置也会改变。无论您用于大小、边距、填充等的单位类型如何，都会发生这种情况。

尝试将文本包含在它自己的元素中。将你的 CSS 分成排版样式和定位样式，将每一行的文本包装在一个 span 元素中。

<li>
    <a href="#" data-id="BMW">
        <span>BMW</span>
        <span></span>
    </a>
</li>

然后将您的单独字体样式应用到此范围：

.ajaxdrilldown ul li a span:first-child {
    display:inline-block; /* IE7 will need a hack for this */
    position:relative;
    left:0.3em;
    font-size:1.4em;
    ...
}

这将允许文本在其自身元素的范围内自由扩展，而不会影响其他项目的布局。

您还需要在第 98 行更改此样式：

.ajaxdrilldown div ul li a span

沿着这些思路

.ajaxdrilldown div ul li a span:last-child

阻止跨度污染彼此不同的风格

附带说明一下，您不需要在 display:block; 元素上设置 width:100%。完全删除宽度声明，因为它是不必要的，并且可能会给其他样式的人带来麻烦。

于 2012-10-10T07:13:30.763 回答
0

据我了解，我创建了 jsfiddle。请看一下，让我这是您要寻找的东西或其他东西。

演示

http://jsfiddle.net/saorabhkr/Xbydb/

用行高更新了 jsfiddle。我想建议将相同的行高放在内容高度上。请看一下新的jsfiddle。

http://jsfiddle.net/saorabhkr/Xbydb/2/

于 2012-10-10T04:19:58.863 回答
0

对于使用 CSS 的绝对位置，您必须为其设置此样式

position:absolute;
left:0px;
z-index:10;

并且您必须为其父级设置此样式

position:relative;

最好的祝福

于 2012-10-10T06:34:41.593 回答