CODEWITHSUNDEEP
htmlcssborder
Ajax jQuery
Ajax jQuery

Reputation: 345

borders slightly misaligned

For an odd reason, my 6 borders seem a little garbled.

Here's an image: Issue

Here's my chunk of CSS for that list:

#aboutcontent #names li{
    width: 325px;
    border: 1px solid white;
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
}

I'd like all those borders touching perfectly, no space in between.

Here's a jsfiddle

Upvotes: 1

Views: 681

Answers (4)

user2361409
user2361409

Reputation: 11

Seen on css-tricks.com

The most easy way. Close the li tag on the next line! It seem wired, but it really works.

Example:

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

Upvotes: 1

anpsmn
anpsmn

Reputation: 7257

Give ul font-size: 0 or remove whitespaces between li. Inline-block elements considers the whitespaces too. You can read about this here.

<li></li>...<li></li>  // remove whitespace between li

Fiddle Demo

Or 

#aboutcontent #names{
    list-style-type: none;
    font-size: 0;
}

Fiddle Demo

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

Add float:left; instead of inline-block in your #aboutcontent #names li

CSS:

#aboutcontent #names li{    
    float:left;
}

DEMO

Upvotes: 0

G&#246;kalp Demirbağ
G&#246;kalp Demirbağ

Reputation: 108

try this

#aboutcontent #names li{
    width: 325px;
    border: 1px solid white;
    float:left;
    font-size: 12px;
    line-height: 25px;
    margin: 0 7px 5px 0;
}

Upvotes: 1

Related Questions