css - 填充+宽度

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

padding 和 width 很难共存；只需删除您的宽度声明。由于你的锚是块状的，它们会自动占据 100% 的宽度（包括填充）：

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

现在它应该占据 100% 的宽度。

Answer 2

将此添加到包含链接的 div 中。

overflow-x:hidden;

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

Answer 3

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

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

}​</p>

也许您忘记在模板中包含 reset.css 文件。

检查Normalize.css

Answer 4

这就是填充的作用。看看布局模型是如何工作的：相应地调整。如果您正在寻找一个灵活的解决方案，那么您需要从a元素中移除填充并添加类似内部的东西，该内部span具有适当的边距，a并且其他刻度盘也相应地进行了调整。