我的固定垂直导航栏按下我的按钮？怎么解决？

Question

我的固定垂直导航栏有问题。通过缩小页面，您将看到我的注册按钮将被按下。我尝试了一切来解决它，但没有任何对我有用。有谁知道如何解决它？

我将文本置于按钮的中心，也许这就是为什么它按下整个按钮？

 text-align: center;
 vertical-align: middle;
 line-height: 40px; 

JSFIDDLE

Answer 1

这是边界权利，这导致了问题。 如果添加49％+ 50％按钮宽度+ 1px边框，它将超过浏览器宽度的100％，但您可以使用框阴影，因为它不会影响框模型：

#navigation #package .inloggen {
  width: 50%;
  box-shadow:inset -1px 0 0 gray
}

演示：https://jsfiddle.net/L2pdvays/3/

Answer 2

将box-sizing属性设置为div的border-box。由于边界的额外宽度，这些因此被推倒。边框使总内容，填充和边框为49％，而不仅仅是内容和填充。

基本上，Login div的3px边框使总数达到114px。这占了111px的内容和填充加上3px的边界。那个div的总和将是114px。如果你的另一个div占用111px（因为它没有边框）...... 114 + 111 = 225px，大于你的容器宽度222px。

因此，要使50％意味着50％的TOTAL内容+填充+边框宽度，您需要将框大小设置为边框。这样做，你就可以使你的div都达到50％。