3

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

问题是链接文本的数量可能会有所不同。当链接文本换行到 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。

4

2 回答 2

1

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

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

于 2013-02-26T11:30:02.820 回答
0

这里不需要使用任何 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（需要居中的类）。

于 2013-02-19T11:54:03.827 回答