Question

我正在页面顶部设置一个链接标题，可能会或可能不会在某个时刻替换为对象或图像或不同大小。所以我没有使用列表，也没有使用表格，我只是写出文本并设置类来分割对象，就好像它们在表格中一样。

<a href="#" class="left"> Link 1 </a> <a href="#" class="middle"> Link 2</a> <a href="#" class="right">Link 3</a>

.left{display:table-cell;min-width:150px;min-height:25px;}
.middle{display:table-cell;min-width:150px;min-height:25px;}
.right{display:table-cell;min-width:150px;min-height:25px;}

然而，当我这样做时，我的链接可能是50px的文本，但可点击的区域是125px。如何才能使链接仅在链接上可点击？

JS Fiddle here

Answer 1

您应该将链接嵌套到跨度中，并在跨度中应用表格单元格样式。

这样的事情：

<span class="left"><a href="#">Link 1</a></span>
<span class="middle"><a href="#">Link 2</a></span>
<span class="right"><a href="#">Link 3</a></span>

请参阅此分叉fiddle

Answer 2

使用内联块而不是表格单元格。将宽度设置为自动。如果需要间距，请使用保证金

.left
{
    display:inline-block;
    width: auto;
    min-height:25px;
}
.middle
{
    display:inline-block;
    width: auto;
    margin: 0 2em;
    min-height:25px;
}
.right
{
    display: inline-block;
    width: auto;
    min-height:25px;
}

http://jsfiddle.net/FYELm/5/

我如何得到一个css表格单元格链接不拉伸可点击区域

2 个答案: