CODEWITHSUNDEEP
htmlcss
absurdity9
absurdity9

Reputation: 57

Unordered list contains a weird space between list items

I'm working on a portfolio for a friend. The tiles for each portfolio item do not align properly, there is an odd space after the 3rd tile which causes the fourth item to stick out. This makes the 6th item not fit in.

Screenshot: enter image description here

Code:

  <!-- 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>

EDIT** CSS - CODE:

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

Does anyone know what caused this?

Upvotes: 1

Views: 1295

Answers (3)

Kidkie
Kidkie

Reputation: 83

Apparently you can get rid of this issue by setting <ul> to font-size: 0; and then setting font-size on <li>.

As seen here: A Space between Inline-Block List Items

Upvotes: 0

khaledxe
khaledxe

Reputation: 15

you've a lot of solutions to do

First you can use html bootstrap grid system here you're link http://getbootstrap.com/examples/grid/ and this solution will be good for you as you're making portfolio

another solution :

you can give your img element fixed width and height in example 

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

and this will fix the problem of space you face

also you can give your <div> width in your style 

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

Upvotes: 0

Leo Farmer
Leo Farmer

Reputation: 7910

This is caused by the margin on your ul.work-images li style. A fix for it would be to remove the margin on the left-hand side like this:

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

Upvotes: 2

Related Questions