CSS在父元素上擴展子元素

Question

我正在嘗試獲取一些列表項以覆蓋整個列表

這是相關代碼

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

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

通常是這樣的：

但是有時當我離開頁面並稍后返回時（不是在重新加載后），會發生這種情況： 將單個項目的寬度設置為33.3％會使它變短一個像素，而使其33.333％會使問題變得更糟...

Answer 1

刪除“ ul”的父代的填充

Answer 2

只是假裝：

#navbar ul li{
   width:33%;
}

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

還包括此樣式：

* { box-sizing: border-box } 

參考： http : //www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

您可以使用CSS表輕松地實現此布局。 廣泛支持並在語義上合理。

#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

建議：

@Miro嘗試CSS Flexbox布局，它將為您提供幫助，但僅在現代瀏覽器中有效。

CSS Flexbox

CSS靈活框布局模型或“ flexbox”是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 。 對於許多應用程序來說，靈活框模型提供了對塊模型的改進in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents 。

這是一個例子

HTML

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

樣式表

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;
}

這是演示

該鏈接將為您提供幫助。