邊框半徑比例

#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。邊框半徑比例

來源

2014-03-25 user3461434

HTML的外觀如何？ –

如果我正確理解你的問題，你擔心填充是「偏離中心」，並在右邊。這是因爲你的填充定義是：

padding: 4px 9px 9px 0px;

上面是你目前有。填充定義爲：

padding: top right bottom left

你可以看到上面，要設置右側9px，但左側爲0px。如果你希望這是成比例的，確保左右值相等。

來源

2014-03-25 20:02:03 Charlie74

哇，我真是一個愚蠢的錯誤：D我整整一個小時都在搜尋我的大腦，試圖弄清楚什麼是錯誤的。謝謝！ – user3461434

根據您的要求，我認爲您需要製作一個具有所需高度和寬度的文本框，並始終與中心文字對齊。所以你可以像下面一樣使用，

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

其中對齊中間的文字。請檢查這Fiddle。

來源

2014-03-25 20:18:43 Soundar

這不會按我想要的方式工作，因爲鏈接中的文字會因其長度而有所不同。儘管文本的長度，我希望它有一個9px的空白空間。雖然已經知道了。只是我被分散了。 – user3461434

邊框半徑比例

回答

相關問題