Question

#menu a {
    display: block;
    margin-right: 67px;
    text-decoration: none;
    font-family: Novecentosanswide-Book;
        font-weight: normal;
    font-style: normal;
        -webkit-font-smoothing: antialiased !important;
        text-transform:lowercase;
    font-size: 18px;
    color: #81878b;
    border: none;
        padding: 4px 9px 9px 0px;
}

#menu a:hover {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
     border-radius: 0px 0px 10px 10px;
     background-color: #ff672a;
     color: white;
     text-decoration: none;
}

我有这个css代码，基本上只创建一个圆角矩形。它工作正常，但我想让它更长一点，所以我增加#menu a中的填充，它的作用是它增加了矩形的大小比例向右，所以它看起来不合适。我想要做的只是增加它的长度，以便在链接的右边和左边有大约9px。

Answer 1

如果我理解你的问题，你会担心填充是否偏离中心＆＃34;在右边。这是因为您的填充定义是：

padding: 4px 9px 9px 0px;

以上就是你现在拥有的。填充定义为：

padding: top right bottom left

您可以在上面看到，您将右侧设置为9px，但左侧设置为0px。如果您希望它成比例，请确保右侧和左侧值相等。

Answer 2

根据您的要求，我认为您需要制作一个具有所需高度和宽度的文件，文本与中心始终对齐。所以你可以使用如下，

a {
    display: table-cell;
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
}

这使中间的文字对齐。请查看此Fiddle。

边界半径比例

2 个答案: