使浮动的李的跨度遍布整个 ul 宽度

Question

非常简单 html：

<div id="medium_ribbon">    
  <ul class="up_rectangles">
   <li id="first_up">
     <img src="img/home1.png" width="200" height="135" class="scalable">
   </li>
   <li id="second_up">
      <img src="img/home2.png" width="200" height="135" class="scalable">
   </li>
   <li id="third_up">
      <img src="img/home3.png" width="200" height="135" class="scalable">
   </li>
   <li id="fourth_up">
     <img src="img/home4.png" width="200" height="135" class="scalable">
   </li>    
  </ul>
</div><!--medium_ribbon-->   

使用以下 CSS：

#medium_ribbon {    
  text-align:center;
  background-color:#172236;
  overflow:auto;
}
.up_rectangles {
  max-width: 1105px;
  list-style: none;
  margin-bottom: 0px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-top: medium solid #F00;    
}
.up_rectangles li {
  line-height: 200px;   
  width: 23.7%;    
  background-color: #C8CACF; 
  float:left;
  margin-right: 1.3%;
  border:solid thin blue;
}
.up_rectangles>li:last-child {  
  margin-right:0;           
}
.up_rectangles img {
  vertical-align:middle;
}

您可能会在http://users.sch.gr/ellhn/上看到它。

我的问题是为什么第四个框不会到达红色边框线的末端，以至于整个UL宽度跨度。不包括LI边界的百分比为98.7％。其余的1.3％应该给予八个（左右左右...）边界。为什么整个UL宽度没有填充？通过尝试增加边框宽度（从薄到中），第四个框失去了位置，并进入下一行。我还尝试使用边框宽度的百分比，它没有用...有什么方法可以跨我的li直到最右端？

谢谢

Answer 1

尝试此

.up_rectangles li{margin-right: 1.45%}
.up_rectangles > li:last-child { float: right; margin-right: 0;}

Answer 2

尝试此

.up_rectangles>li:last-child { margin-right:0;border:solid 2px #C8CACF !important;}

或

.up_rectangles>li:last-child {margin-right:0;border:solid 0px #C8CACF !important;float:right;}