菜单栏留下侧面空间

Question

我正在尝试制作一个菜单栏。容器名为：#menu，并具有以下CSS：border: 0px; margin: 0 auto; position: relative; display: inline-block; width: 100%;

问题在于，当我将菜单栏的宽度设置为12.5％时，它们会在侧面留出空间。抱歉，但我无法显示真实内容，所以我给出了这张图片：https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png。 menu_bars的CSS为：width: 12.5%; float: left; padding: 25px 18px 25px 18px; background: rgba(237, 157, 28, 0.992157); font-weight: bold; font-size: 15px; text-align: center; line-height: 15px; height: 20px;

Answer 1

您应该将左边距设置为20px。

Answer 2

您需要为.menu_bar_item：

声明此内容

.menu_bar_item {
    box-sizing: border-box;
    /* more styles */
}

http://jsfiddle.net/teddyrised/eWNSz/1/

box-sizing: border-box属性可防止填充添加到宽度上（无论如何都是默认行为）。声明此属性后，您还需要调整height属性。