导航栏 div 边框偏离中心答案

【问题标题】：Navbar div off centre by border导航栏 div 边框偏离中心
【发布时间】：2013-03-03 07:35:31
【问题描述】：

我有一个导航栏：

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 的左侧总是有一些空间，但右侧没有。这个问题怎么解决？？？

【问题讨论】：

做边距：自动；有帮助吗？
w3.org/TR/CSS2/box.html

标签： html css border margin

【解决方案1】：

从您的 CSS 中删除 width: 100%。 div 是块级的，因此会占用所有可用的水平空间。添加一个显式的 100% 只会在您给它 padding 或在本例中为 border 时引入问题

【讨论】：

谢谢！完美的解决方案，我会在未来的 div 中牢记这一点！ :D

【解决方案2】：

添加边框宽度和 CSS3 框大小来解决问题。

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

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

【讨论】：