Why is not well positioned among two from a list?

Question

I have this page:

I have listed above and unfortunately elements (some) are not positioned correctly ...

I want to be subducted (fixed)

Look at the picture below to understand more clearly what I mean.

CODE HTML:

<ul class="new-list">
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/unlimited-2015-photo-impression.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image1_.jpeg" width="145" alt="kranz"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/unlimited-2015-photo-impression.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image1_.jpeg" width="145" alt="kranz"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/unlimited-2015-photo-impression.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image1_.jpeg" width="145" alt="kranz"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/unlimited-2015-photo-impression.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image1_.jpeg" width="145" alt="kranz"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/unlimited-2015-photo-impression.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image1_.jpeg" width="145" alt="kranz"></a></li>
  <li><a href="http://paulvanesch.blogspot.ro/2015/06/marlene-dumas-image-as-burden-fondation.html?view=flipcard" target="_blank"><img src="/wp-content/themes/wpbootstrap/images/image5_.jpeg" width="145" alt="thumb"></a></li>
<ul>
</ul></ul>

CODE CSS:

.new-list{
  text-align:center;
}
.new-list li{
  display:inline-block;
}

Can you please tell me what the problem is and what is not good?

Thanks in advance!

did you try `.new-list{text-align:center; padding:0;margin:0}` and `.new-list li{display:inline-block;padding:0;margin:0}` ? — morels, Oct 28 '15 at 16:36

score 0 · Answer 1 · answered Oct 28 '15 at 16:39

0

This will have to do with white space between <li> elements. In your other rows further down, they are all part of one line. In your top two rows, it is one line that was broken at the end and the white space to make them centered is what is throwing this off.

I don't have a solution to your problem at the moment but that is the cause.

answered Oct 28 '15 at 16:39

Rob

13,342
26
40
60

@cimmanon The question is not about white space between elements. That it was the solution is not obvious; perhaps only to some. That is why I didn't vote to close and you shouldn't be guessing as to what I was thinking. – Rob Oct 28 '15 at 17:14

Why is not well positioned among two from a list?

1 Answers1