3

I have a list of items displayed horizontally. I want to create a border around each li, and have them jut up right next to each other.

I created a small test to illustrate the problem, seen here:

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li>
    <li><a href="#">November - 0</a></li>
    <li><a href="#">December - 765</a></li>
    <li><a href="#">January - 0</a></li>
    <li><a href="#">February - 756</a></li>
    <li><a href="#">March - 2</a></li>
</ul>

.dashboard_inline_links li {
    border-style: solid;    
    border-width: 1px;    
    display: inline;  
    padding: 4px 8px;
}
.dashboard_inline_links a {   
    border-color: transparent #C6D3F0;   
    border-style: solid;    
    border-width: 1px;   
    color: #28478E;   
    display: inline-block;    
    margin: 0;    
    padding: 0;
}

In short - there is white-space between the list items. I want them to jut up next to each other, and now I can only accomplish this by setting margin-left = -3px on the li items.

Any idea what is happening? I feel like I am missing something obvious!

David Thomas
  • 249,100
  • 51
  • 377
  • 410
esther h
  • 1,468
  • 2
  • 17
  • 35

5 Answers5

7

As far as I could tell, you're setting the li to be display: inline, which means it will be treated like text in a paragraph. Hence, the white-space between the elements becomes a space that you visually see.

This should demonstrate what I mean: http://jsfiddle.net/8F2XY/1/

Note, the following "resolves" the issue:

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li><li><a href="#">November - 0</a></li><li><a href="#">December - 765</a></li><li><a href="#">January - 0</a></li><li><a href="#">February - 756</a></li><li><a href="#">March - 2</a></li>
</ul>

http://jsfiddle.net/8F2XY/2/

It's the absence of whitespace between the lis and betwen the lis and as that fixes the code as-is.

Now, if you float: left, the element will become like a display: block element which will flow left in the display. Whitespace will be ignored.

So:

.dashboard_inline_links {
    border-bottom: 1px dotted #C6D3F0;
    border-top: 1px dotted #C6D3F0;
    display: inline-block; overflow: hidden;
    padding: 6px 0;
    width: 916px;
    margin-top: -5px;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
}
.dashboard_inline_links li {
    list-style-type: none;
    border-style: solid;    
    border-width: 1px;    
    float: left;
    padding: 4px 8px;
}
.dashboard_inline_links a {   
    border-color: transparent #C6D3F0;   
    border-style: solid;    
    border-width: 1px;   
    color: #28478E;   
    display: block;    
    margin: 0;    
    padding: 0;
}

http://jsfiddle.net/8F2XY/

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
  • Yes, only float wasn't meant for this kind of job. `display: inline-block` is a more correct approach. – Madara's Ghost Feb 26 '12 at 11:23
  • yes, the float does the trick. why won't inline work though? i dislike using float immensely – esther h Feb 26 '12 at 11:23
  • @Truth - Do you have a link to something that explains that statement? – Jared Farrish Feb 26 '12 at 11:24
  • @estherh - You can remove the whitespace between the `li`s, I suppose: http://jsfiddle.net/8F2XY/2/ – Jared Farrish Feb 26 '12 at 11:25
  • thanks, I didn't think about the line breaks in there. makes perfect sense now – esther h Feb 26 '12 at 11:29
  • @JaredFarrish: Well, floats were originally meant for floating elements inside of inline text (such as images) and allow the text to naturally flow around it, without breaking the document. It wasn't meant for layout, that's what the newer `grid` rules and the `display` rules are for. – Madara's Ghost Feb 26 '12 at 11:30
  • I can see that it's evolving with new properties and values to be more descriptive, but it's going to be a while before `float` stops being used for layout (as it took a while for `table`s to finally go away). Until new techniques firm up, I imagine `float` is going to be used in these cases. – Jared Farrish Feb 26 '12 at 11:37
1

Instead of using display:inline; use float:left; in .dashboard_inline_links li

.dashboard_inline_links li {
    border-style: solid;    
    border-width: 1px;    
    padding: 4px 8px;
    float:left;
}

See http://dabblet.com/gist/1916146

And this question: What is the difference between Float:left vs Display:inline? While every element in browser goes to left by default

Community
  • 1
  • 1
Tim
  • 9,351
  • 1
  • 32
  • 48
1

Its because of inline-block elements put a space (which usually is 4px wide) between next inline-block elements.

You can remove it using -4px letter spacing property.

http://jsfiddle.net/aAHXx/

Shawn Taylor
  • 3,974
  • 4
  • 17
  • 23
1

The problem is that line breaks are interpreted as whitespace by browsers.

I haven't found a CSS workaround, but a very correct comment states that you should remove the whitespace altogether:

<ul class="dashboard_inline_links">
    <li><a href="#">October - 0</a></li><li>
    <a href="#">November - 0</a></li><li>
    <a href="#">December - 765</a></li><li>
    <a href="#">January - 0</a></li><li>
    <a href="#">February - 756</a></li><li>
    <a href="#">March - 2</a></li>
</ul>

This will work correctly in your current CSS settings. I'm still trying to find a CSS way though.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
1

inline-block has a bad habit of putting spaces in between elements. it's natural by the way. this is caused by white-space between the <li>s

what you can do to remedy this are:

  • put the <li> one after the other in single-file. meaning, leave no white-spaces, tabs or new lines:

just like this

//notice after the </li>, you follow another after it. no spaces!
<ul> 
    <li>item</li><li>item</li><li>item</li> 
<ul>
  • or if you prefer having it in another line, comment-out the white-space. make sure that you start and end the comment after and before the <li>s respectively.

do this:

//notice after the </li>, you follow another after it. no spaces!
<ul> 
    <li>item</li><!--
 --><li>item</li><!--
 --><li>item</li> 
<ul>

i prefer the second. although messy, i can see the structure of the list.

Joseph
  • 117,725
  • 30
  • 181
  • 234