或

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宽度？通过尝试增加边框宽度（从薄到中），第四个框丢失其位置并转到下一行。我也尝试使用百分比作为边框宽度，它没有用... 有没有办法跨越我的李，直到最右端？

谢谢

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;}

使浮动的li跨越ul宽度

2 个答案:

或