Question

我有一个导航栏：

HTML：

<div id="navbar">
</div>

CSS：

#navbar{
    width: 100%;
    height: 50px;
    background-color: #F0F0F0;
    border-color: #B2B2B2;
    border-style: solid;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

出于某种原因，边框使其偏离中心，div的左侧总是有一些空间，而右边则没有。我该如何解决这个问题？

Answer 1

从CSS中删除width: 100%。 div是块级的，因此会占用所有可用的水平空间。添加显式100％只会在您提交padding或在此情况下border

时引入问题

Answer 2

添加border-width和CSS3框大小以解决问题。

border-width:2px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

http://jsfiddle.net/ADwwP/1/

Navbar以边界为中心

2 个答案: