html - 菜单栏留出侧面空间

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

您应该将左侧填充设置为 20 像素。

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属性。