CSS stretching child elements across parent element

Question

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:

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

Answer 1

删除“ ul”的父代的填充

Answer 2

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/

Answer 3

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/

Answer 4

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.