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

删除＆＃34; ul＆＃34;

的父级的填充

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 Flexible Box Layout Model，或＆＃34; flexbox＆＃34; ，是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;
}

以下是 Demo

此Link会对您有所帮助。