0

我正在使用 Foundation 4 框架创建一个服务器文件表，并且似乎遇到了一个问题，即当文件名变为两行时，并非所有行都是可点击的。我需要整个阴影行作为链接。

查看我在 Photoshop 中突出显示的可点击区域的图像。

每行的HTML结构如下：

<div class="fileTable row alternate">
    <a class="icon folder" href="#">
        <div class="large-10 columns margin">test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder</div>
        <div class="large-2 hide-for-small columns margin">23/05/2013</div>
    </a>
</div>

.margin 类似乎是问题所在。添加它是为了在每行中垂直集中文本，它在顶部和底部添加 7px。我会使用 line-height 并将其设置为每行的相同高度（44px），但这会导致进入两行的任何文件名的行之间存在巨大差距。

上面的截图正是我需要它的样子，只是由于某种原因它不能正确地作为一个链接。

fileTable 链接的 CSS 如下：

.fileTable a {
    display: block;
    line-height: 25px;
    text-decoration: none;
    color: #000000;
    padding-left: 40px;
}

.margin {
    margin-top: 7px;
    margin-bottom: 7px;
}

您看到的其余类要么用于显示图标、交替阴影或标准 Foundation 4 网格类。

4

1 回答 1

4

请阅读CSS 盒子模型。边距不被视为“框”的一部分，因此不可点击。

你应该使用padding它，然后它会。

于 2013-06-03T16:05:34.240 回答