css - 试图让 last li 拉伸(stretch)到屏幕边缘

Question

我已经使用背景颜色、边框半径和负左边距设置了水平菜单的样式(可能被指定为负边距，但我不知道任何其他方式)，您可以在这里看到:http://tinyurl.com/nu6ltcy

CSS:

#menu-menu-1        {text-align: left; background: #FBBF7E;}
#menu-menu-1 li     {float: left; width: 26%; min-width: 150px; border: 1px solid #766341; border-width: 0; border-radius: 0 0 0 35px; -webkit-border-radius: 0 0 0 35px; -moz-border-radius: 0 0 0 35px;}
#menu-menu-1 li a   {display: block; height: 62px; width: 100%; color: #fff; line-height: 62px; text-align: center;}
#menu-menu-1 li.current-menu-item a {font-weight: bold;}
#menu-menu-1 li#menu-item-13        {background: #766341; }
#menu-menu-1 li#menu-item-14        {background: #F78F1E; margin-left: -35px;}
#menu-menu-1 li#menu-item-17        {background: #F7A54C; margin-left: -35px;}
#menu-menu-1 li#menu-item-15        {background: #FBBF7E; margin-left: -35px;}

如您所见，由于负边距，第 4 个(最后一个)li 在距离边缘约 30 像素处停止，有人可以建议如何解决此问题吗？还是在不使用负边距的情况下使 li 重叠的更好方法？

谢谢

Answer 1

实际上，为此使用负边距也不错..

我会做些什么来让它合适，是这样的:

fiddle

CSS

#menu-menu-1 li {
   float: left;
   width: 30%; /* 4 li's (25%) plus the 5% negative margin. */
   min-width: 150px;
   box-sizing: border-box;
   margin-left: -5%; /* 5% is high enough to hide border edges in lower resolutions */
}
#menu-menu-1 li#menu-item-13 {
   background: #FEF4E8;
   margin: 0px;
   width: 25%; /* No negative margin so width stays 25% */
}