填充+寬

Question

我與底邊框的聯繫，在CSS是這樣的：

a { 
    display: block; 
    width: 100%; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 30px; 
    border-bottom: 1px solid #EEE; 
} 

我有問題，因爲「填充」值被添加​​到該寬度值和邊框底部過長：

http://screenshooter.net/9186066/advygxa

你有什麼想法嗎？

Answer 1

這就是填充。看看佈局模型如何工作：相應地進行調整。如果您正在尋找一種靈活的解決方案，那麼您需要從a元素中刪除填充，並添加類似span這樣的內容，其在a中具有適當的邊距，並相應地調整其他撥號。

Answer 2

填充和寬度難以共存;只需刪除您的寬度聲明。因爲你的錨塊，它們將自動佔用100％的寬度（包括填充物）：

a { 
    display: block; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 30px; 
    border-bottom: 1px solid #EEE; 
} 

現在應該佔用100％的寬度。

Answer 3

將此添加到包含鏈接的div。

overflow-x:hidden; 

演示：http://jsfiddle.net/calder12/zXmG3/

Answer 4

它的正常工作，檢查http://jsfiddle.net/GjMQe/

a { 
display: block; 
width: 100%; 
padding-top: 8px; 
padding-bottom: 8px; 
padding-left: 30px; 
border-bottom: 1px solid #EEE; 

}

或許你忘了，包括在你的模板reset.css文件。

檢查Normalize.css