Question

我使用背景颜色，边框半径和负左边距设置了一个水平菜单（可能是为负边距设定的，但我不知道其他任何方式），你可以在这里看到：{{3} }

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% */
}

Answer 2

试试这个。

#menu-menu-1        {text-align: left; background: #FBBF7E;}
#menu-menu-1 li     {float: left; width: 27.2422%; 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: -3%;}
#menu-menu-1 li#menu-item-17        {background: #F7A54C; margin-left: -3%;}
#menu-menu-1 li#menu-item-15        {background: #FBBF7E; margin-left: -3%;}

试图让最后一个拉伸到屏幕的边缘

2 个答案:

CSS