Question

问题：有一个带css的照片库：

ul.photo-grid { 
  margin: 0px 0px 0px -10px;
  padding: 0px;
  min-width: 840px;
}

ul.photo-grid > li.photo {
  display: inline-block; 
  width: 25%; 
  min-width: 210px;
  text-align: center;
  padding-left: 10px;
  margin: 0px 0px 10px 0px;

  vertical-align: baseline !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

用这样的html：

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="img/150x200.jpg" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>...

有趣的是在chrome，firefox，opera中运行良好，即：显示4个完美列，但它不在jsfiddle中（显示3列）！任何线索为什么会发生？

Answer 1

不要在<li>之间留出任何空格。在您添加规则display:inline-block时。这在两个<li>之间留出了一点空间。这样写。

<ul class="photo-grid">
   <li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li
    ><li class="photo">
      <a href="#" class="photo-link">
        <img src="http://tracy.titanserver2.com/tph/getPhoto.php?uid=5358029&num=1&type=3" width="150" class="photo-img"/>
        <span class="photo-title">a girl</span>
      </a>
  </li>
    </ul>

请检查此fiddle或fiddle modified。查看html和css。

jsfiddle width miscalculation？

1 个答案: