Question

我正在为朋友制作一个投资组合。每个项目组合项目的图块都没有正确对齐，第三个图块后面有一个奇怪的空间，导致第四个项目突然出现。这使得第6项不适合。

截图： enter image description here

代码：

  <!-- UX Works container -->
  <div id="work" class="container">
    <h2>UX Projects</h2>
    <ul class="work-images">
      <li> <!-- THREE ITEMS -->
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="interaction-design.html" title="Image 01"><img src="img/1-thumb.jpg"/></div>
        <div class="thumbnone">Wearable G-Scope Interaction Design project</div></a>
      </li>
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="information-architecture.html"><img src="img/2-thumb.jpg" />
        </a>
        <div class="thumbnone">Information Architecture for Instant Noodles E-Store</div>
        </div>
      </li>
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="research-critique.html"><img src="img/3-thumb.jpg" />
        </a>
        <div class="thumbnone">Review of CHI2014 paper Quantifying Visual Preferences </div></div>
      </li>
      <li> <!-- THREE ITEMS -->
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="requirements-engineering.html"><img src="img/3-1-thumb.jpg" />
        </a>
        <div class="thumbnone">Requirements modelling for Amazon Drone </div></div>
      </li> 
      <li>
        <div><a class="fancybox-thumb" rel="fancybox-thumb" href="inclusive-design.html"><img src="img/9-thumb.jpg" />
        </a>
        <div class="thumbnone">Inclusive design WCAG2.0 Poster </div></div>
      </li>
      <li>

编辑** CSS - 代码：

/**** Work container *****/
ul.work-images li {
    list-style:none;
    display:inline-block;
    margin: 8px 10px;
    background:
}
ul.work-images li:first-child {
    margin-left:0;
}
ul.work-images li:second-child {
    margin-left:0;
}
ul.work-images li:third-child {
    margin-left:0;
}
ul.work-images li div {
    background:url(../img/eye.png) 50% 50% no-repeat;
    background-color: #f04949;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul.work-images li img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
ul.work-images li img:hover {
    opacity:0.1;
}

有谁知道是什么造成的？

Answer 1

这是由ul.work-images li风格的边距引起的。修复它的方法是删除左侧的边距：

ul.work-images li {
  list-style: none;
  display: inline-block;
  margin: 8px 10px 8px 0px;
}

Answer 2

你有很多解决方案

首先您可以使用html bootstrap网格系统在这里你链接http://getbootstrap.com/examples/grid/，当你正在制作投资组合时，这个解决方案对你有好处

另一种解决方案：

你可以在示例中给你的img元素固定宽度和高度

<img src="img/1-thumb.jpg" style="width:320px;height:320px;"/>

这将解决你面临的空间问题

您也可以在风格中提供<div>宽度

<div style="width:33%;">

Answer 3

显然，您可以通过将<ul>设置为font-size: 0;，然后在font-size上设置<li>来解决此问题。

如下所示： A Space between Inline-Block List Items

无序列表在列表项

3 个答案: