CSS 定位：百分比宽度相同，但 div 似乎变小了

Question

所以我有一个问题，希望你能帮我解决这个问题，因为我没有想法：

我尝试创建一个 html/css-based 菜单（我希望它是正确的......也许 "menu" 是更好的英语？对不起，这里是德语），到目前为止效果很好，但是我的 css 有一个小瑕疵我搞不懂。

为了让事情更清楚，我在这里创建了一个fiddle：[已删除，图片清楚:)]

因此，在 fiddle 中，您会看到 "days" 行，其中 css-class .day 的百分比宽度与我的 menu-cssclass 相同。

这里是对应的css:

.a4 .days td div {
                color: #ffffff;
                font-size: 20px;
                padding: 6px 0 4px;
                text-align: center;
                display: inline-block;
                width: 14.28%;
                border-right: 2px solid white;
                box-sizing: border-box;
                font-family: 'OpenSans_SemiBold';
            }

...和

.a4 .menu-item {
        width: 14.28%;
        float: left;
        vertical-align: top;
        margin-bottom: 5px;
    }

所以我认为菜单和 day-fields 会正确对齐。但遗憾的是，正如在 fiddle 中看到的那样，我的计划越接近 "to sunday"，菜单和 day-rectangle 末尾之间的 space 就越少。

我希望这里有人能帮助我，因为在尝试改变位置之后：相对于绝对和其他一些想法我现在没有想法并且显然需要帮助。

编辑： 这是来自评论的截图，更好地描述了我的问题！实际上，我希望所有字段看起来像 "Monday"，图片和 "monday" 结尾之间的边距相同 - 标题（抱歉我的英语不好）：

Answer 1

我不确定我是否正确理解了您的问题，但我认为这可能会有所帮助。

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/static/flat/css3-modsel-33.html

使用最后一个 class 来定位星期日并给它更大的余量？如果那是你想要的。

希望对您有所帮助！

Answer 2

在这一行删除 colspan="2"

<tr class="content">
    <td class="hspace border-color">              
        <td class="border-color" colspan="2"> <--- here

原因是您的 table 行宽度不同，"days" 行是 1174px，"content" 行是 1204px，所以宽度的 14.28% 给出了两个不同的值

CSS 定位：百分比宽度相同，但 div 似乎变小了

CSS Positioning: Same width in percent, but one div seems to get smaller

html

css

css-position