CSS：在具有border-radius的链接上显示表格单元：错误显示的边框和多余的边距

B7th 发表于 Dev

B7th

我的目标是制作带有边界半径的可变数量的分页链接，这样看起来一切都很好。在小屏幕下，它也应该占据屏幕的整个宽度，并且链接必须均匀间隔且没有边距。

但是之后，

.pagination{
display:table;
    font-size:0.1px;
    border-collapse:collapse;
}
.pagination a{
    background-color:#8bf;
    display:table-cell;
    font-size:1rem;
    border:1px solid #48f;
    min-width:3rem;
    height:2rem;
    vertical-align:middle;
    text-align:center;
}
.pagination a:first-child{
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
}
.pagination a:last-child{
    border-top-right-radius:1rem;
    border-bottom-right-radius:1rem;
}
@media(max-width:470px){
    .pagination{
        width:100%;
    }
}

将边框取整，同时仍使背景变圆。

此外，链接之间存在无法删除的余量。[编辑：已取出]

我不能为链接的宽度指定1到4之间的宽度。

http://jsfiddle.net/md6s998p/

保利

好的...虽然我不清楚您要问的是什么问题，但我认为这与边境有关。

您仍然可以使用该border-radius属性进行舍入并用abox-shadow代替边框。

我在这个例子中夸大了它

JSfiddle演示

.pagination a{
    background-color:#8bf;
    display:table-cell;
    font-size:1rem; 
    //border:1px solid #48f; /* remove this*/
    min-width:3rem;
    height:2rem;
    vertical-align:middle;
    text-align:center;
    box-shadow:0 0 4px 0 red; /* add this...or variant */
}

坦白说，我想您会发现，将其构造为ul/li/a列表而不是仅将其作为段落中的一系列链接会更容易。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。