0

I've been spacing list items using the technique found in this answer, but a recent change is requiring me to insert the elements dynamically. I have found that for some reason the approach completely stops working if the elements are inserted dynamically. Why?

This fiddle demonstrates the static and dynamic versions.

As seen in the linked question, the basic idea is below. It's just when the HTML is inserted to the page via Javascript, the menu items don't justify.

HTML

<div id="menuwrapper">
    <div class="menuitem">menu</div>
    <div class="menuitem">menu</div>
    ...
    <span class="stretcher"></span>
</div>

CSS

#menuwrapper, #dynamic {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    min-width: 300px; /* just for demo */
}

#dynamic {
    background: blue;
}


.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
Community
  • 1
  • 1
Stephen Searles
  • 971
  • 6
  • 18

2 Answers2

1

There was no spaces between elements. take a look jsfiddle

document.getElementById("dynamic").innerHTML = '<div class="menuitem">CAREERS</div> <div class="menuitem">TRADE</div> <div class="menuitem">CONTACT US</div> <div class="menuitem">PRIVACY POLICY</div> <div class="menuitem">T&amp;CS</div> <div class="menuitem">SITEMAP</div> <span class="stretcher"></span>';

Some related articles: - Fighting the Space Between Inline Block Elements

Mak
  • 19,913
  • 5
  • 26
  • 32
0

You can do what apple website does and make your menu items display: table-cell; This is probably not completely cross browser compatible (e.g. IE6 will probably fail), but it does not require any javascript at all

Populus
  • 7,470
  • 3
  • 38
  • 54