当前位置：文江博客话题详情

锚标签 - 等高，仍然可以通过 CSS 点击？

发布于 2024-11-30 17:04:53 字数 302 浏览 3 评论 0原文

我在 jsfiddle 上有一些代码： http://jsfiddle.net/tYrCe/1/ 如果您愿意，请编辑它！

我有 3 个带有锚标签的按钮。我希望它们的高度相等。

要求

高度相等
独立于内容（最小高度，不行）
整个链接应该仍然可点击（javascript onclick，不行）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最笨的告白 2024-12-07 17:04:53

您可以使用display: table-cell。

table-layout:fixed 在单元格之间均匀分配可用宽度。

确保您可以接受浏览器支持：http://caniuse.com/css-table
（我认为不支持 IE6/7 就可以了，因为您使用的是 outline）

参见： http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}

You can use display: table-cell.

table-layout: fixed evenly distributes the available width between the cells.

Make sure the browser support is acceptable to you: http://caniuse.com/css-table
(I assume no IE6/7 support is fine because you're using outline)

See: http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}

回复收藏 0 原文

不必了 2024-12-07 17:04:53

经典的纯 CSS 方法是使用较大的底部填充，然后反转边距，如中所述这篇“位置就是一切”文章。

这是您相应修改的小提琴。

HTML：

<div class="urls">
    <a href="#">A little content</a>
    <a href="#">A little more content with more text</a>
    <a href="#">A little very much more content with very much more text</a>
</div>

CSS：

.urls {
    width: 300px;
    overflow-y: hidden;
}
.urls a {
    display: inline-block;
    float: left;
    padding-bottom: 30em;
    margin: 0 0 -29em;
    width: 33.33%;
}

The classic, pure CSS, way is to use a large bottom padding and then reverse margin as discussed in this "Position is Everything" article.

Here is your fiddle modified accordingly.

HTML:

<div class="urls">
    <a href="#">A little content</a>
    <a href="#">A little more content with more text</a>
    <a href="#">A little very much more content with very much more text</a>
</div>

CSS:

.urls {
    width: 300px;
    overflow-y: hidden;
}
.urls a {
    display: inline-block;
    float: left;
    padding-bottom: 30em;
    margin: 0 0 -29em;
    width: 33.33%;
}

回复收藏 0 原文

~没有更多了~