Question

我有下面的CSS和HTML。我有一个菜单，其中lis是一个设置的高度和宽度，并具有相对位置。其中的链接绝对定位为占用所有可用空间，以便可以点击整个li。到目前为止一切都很好。

问题是链接文本的数量可能会有所不同。当链接文本包装到2行（例如第2个链接）时，我希望有更少的垂直填充。我会为第二个链接添加一个类，除了解决方案需要是动态的并使用javascript。菜单可能会更改，以便第一个链接包含更多文本并包装到2行，在这种情况下，我也需要删除其垂直填充。我需要这样做而不需要更改代码。

我开始研究使用jQuery的解决方案。我尝试测量链接的高度，所以如果它高于'x'，那么我可以添加删除垂直填充的类。然而，这不会起作用，因为高度是由绝对定位设定的。

还有另一种方法可以测量文本是否包裹在2行上吗？我可以计算字符的数量，但这个看起来可靠，因为有些字符比其他字符占用更多的宽度。

如果我在包含文本的链接中添加了一个范围，它会起作用吗？那么可能链接仍然可以绝对定位，其跨度可以测量其高度？

http://jsfiddle.net/cUQbJ/3/

<li>
    <a href="#">Link1</a>    
</li>    
<li>
    <a href="#">Link 2 with long text</a>    
</li>    
<li>
    <a href="#">Link3</a>    
</li>    



 li {
   display: block;
    float: left;
    position: relative;
    text-align: center;
    width: 83px;
    min-height: 53px;
    background-color: grey;
    margin-right: 5px;
}
a {
    padding-top: 13px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
}

更新 - 我需要支持IE7。

Answer 1

我通过使用jQuery在链接文本周围插入一个范围来解决这个问题。然后jQuery测量跨度的高度，并根据需要将填充应用于其li。

从响应的角度来看，这可能不是最好的解决方案，如果用户调整浏览器的大小，但它对我有用，这只是一个样式问题，所以如果它有点错误，那么世界末日就不会这样。

Answer 2

这里不需要使用任何JS。

让我们稍微修改一下HTML结构。我在span中包含了链接内容。我们将垂直对齐这些跨度而不是a标记。

<li>
    <a href="#" class="valign"><span class="valigned">Link 2 with long text</span></a>
</li>

http://jsfiddle.net/cUQbJ/5/

我抽象了主要的CSS，它将这个技巧分成两个独立的类.valign（对于父级）和.valigned（需要居中的东西）。

看看链接文本是否用jQuery包装到2行？

2 个答案: