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

这是演示

该链接将为您提供帮助。