填充+宽度

Question

我有CSS的底部边框链接，如下所示：

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

我有问题，因为'padding'值被添加到宽度值并且边框底部太长：

http://screenshooter.net/9186066/advygxa

你有什么想法吗？

Answer 1

填充和宽度很难共存;只需删除您的宽度声明。由于您的锚点是阻挡的，它们将自动占据100％的宽度（包括填充）：

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

现在应该占据100％的宽度。

Answer 2

这就是填充的作用。查看布局模型的工作原理：相应调整。如果您正在寻找灵活的解决方案，那么您需要从a元素中删除填充，并在span和其他拨号中添加具有适当边距的内部a之类的内容相应调整。

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