Question

我已经创建了一个jQuery Sliding Drilldown插件，除了一个部分之外，它运行得很好：箭头的定位。如果我改变它们所包含的元素的字体大小/行高，它们会移动，这对我来说没有意义。谁能告诉我为什么？行高实际上会影响元素中0,0的位置吗？或者是我还缺少的其他事情？

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

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

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

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

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

Answer 1

这里的问题是，您在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

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

在旁注中，您不需要在显示的元素上设置宽度：100％：block;。完全删除宽度声明，因为它是不必要的，并且可能会给其他人造成麻烦。

Answer 2

刚做了一些测试，这是因为你使用em到绝对位置。例如，如果将其更改为px，并修复了基于em的padding-left，则更改font-size时箭头将停止移动。

Answer 3

据我所知，我创造了jsfiddle。请看看，让我知道你正在寻找什么或其他什么。

<强>样本

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

使用行高更新了jsfiddle。我想建议把相同的线高度放在内容高度上。请看看新的jsfiddle。

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

Answer 4

对于使用CSS的绝对位置，您必须为其

设置此样式

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

并且您必须为其父

设置此样式

position:relative;

最好的问候

如何使用CSS强制执行绝对定位和线高？

4 个答案: