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

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 

阻止跨度相互污染不同的风格

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