Question

我的目标是使用带有边框半径的可变数字分页链接，这样看起来很不错。它也应该在小屏幕下，占据屏幕的整个宽度，链接必须均匀分布且无边距。

但是，

.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/

Answer 1

好的......虽然我不清楚你问的问题是什么，但我认为它与边界有关。

您仍然可以使用border-radius属性进行舍入，并将box-shadow替换为边框。

我在这个例子中夸大了它

JSfiddle Demo

.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列表更容易，而不仅仅是段落中的一系列链接。

CSS：在border-radius链接上显示table-cell：错误显示边框和不需要的边距

1 个答案: