0

I'm trying to get some list items to stretch across a list

This is the relevant code

#navbar ul
{   
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#navbar li
{
    display: inline;
    float: left;
    width: 33.33%;
}

Here's what it normally looks like: enter image description here

But sometimes when I leave the page and come back later (not after reloading) this happens: enter image description here Setting the individual item width to 33.3% makes it one pixel short and making it 33.333% makes the problem worse...

Miro
  • 27
  • 4
  • possible duplicate of [Best way to manage whitespace between inline list items](http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) – Paulie_D Apr 25 '14 at 11:58
  • I haven't seen a website under construction image like that since around about the year 2000. Well done! – Billy Moat Apr 25 '14 at 11:58

4 Answers4

1

remove padding of parent of "ul"

Tuhin
  • 3,335
  • 2
  • 16
  • 27
1

Just fake it:

#navbar ul li{
   width:33%;
}

#navbar ul li:last-child{
   width:34%;
}

Also include this style:

* { box-sizing: border-box }

ref: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
1

You could easily achieve this layout using css tables instead. Widely supported and semantically sound.

#navbar ul {   
    width: 100%;
    display: table;
    table-layout: fixed; /* makes all cells equal width */
}
#navbar li {
    display: table-cell;
}

http://jsfiddle.net/kBnrz/1/

xec
  • 17,349
  • 3
  • 46
  • 54
  • I like your answer but miss a text-align:center; for the li like here: http://jsfiddle.net/Mmw29/ – caramba Apr 25 '14 at 12:05
  • @caramba I left it out on purpose, along with color, margins etc, to keep the essential point clear ;) – xec Apr 25 '14 at 12:06
  • This worked but for some reason I had to change the width to 96.8%... Thanks – Miro Apr 25 '14 at 12:11
  • @Miro Check the demo I posted, you will probably need to remove some native (user agent default) margins on the `
      `
     – xec Apr 25 '14 at 12:13
0

Suggestion:

@Miro try CSS Flexbox layout, it will help you, but it works only in modern browsers.

CSS Flexbox

The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Here is one example

Html

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

StyleSheet

html, body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}

.box div.A {
    order:1;
    flex: 1 1 auto;
    align-self: auto;
    min-width: 0;
    min-height: auto;
}

.box div.B {
    order:2;
    flex: 1 1 auto;
    align-self: auto;
    min-width: 0;
    min-height: auto;
}

.box div.C {
    order:2;
    flex: 1 1 auto;
    align-self: auto;
    min-width: 0;
    min-height: auto;
}

Here is the Demo

This Link will help you.

super
  • 2,288
  • 2
  • 21
  • 23
  • Flexbox is pretty neat :) I can't wait till the support is a bit more mature. http://caniuse.com/flexbox – xec Apr 25 '14 at 12:18