基于百分比的填充打破了我的布局

Question

我正在尝试将所有宽度和边距以及填充转换为百分比，以使我正在处理的网站做出响应。我没有问题，但现在我被卡住了。

当我更改li项目的填充时，布局会中断。在整个网站上，填充应该是6px，但即使我将填充设置为百分比，即使小到0.1％，它也会使其中一个元素向下碰撞。该网站不是现场，但我包括一些截图和一些代码。有什么想法吗？

aside#footer-brands ul  {
margin:0;
padding:0;
}

aside#footer-brands ul li {
padding:6px;
float:left;
list-style: none;   
}

aside#footer-brands ul li a {
background-image: url(/images/csr/footer/brands/sprite-brands.png);
background-repeat:  no-repeat;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

<aside id="footer-brands">
            <h6>Our Brands</h6>
            <ul>
                <li><a class="keurig-logo" href="http://www.keurig.com">Keurig</a></li>
                <li><a class="gmcr-logo" href="http://www.greenmountaincoffee.com">Green Mountain Coffee</a></li>
                <li><a class="tullys-logo" href="http://www.tullys.com">Tullys</a></li>
                <li><a class="timothys-logo" href="http://www.timothys.com">Timothys</a></li>
                <li><a class="diedrich-logo" href="http://www.diedrich.com">Diedrich</a></li>
                <li><a class="vanhoutte-logo" href="http://www.keurig.com/shop/k-cups/all-k-cups?hdnCategoryFacets=Brand:Van%20Houtte&hdnBaseFacets=Brand">Van Houtte</a></li>
            </ul>
</aside>

第一个问题，所以我无法发布图片，但这里是how it should look ...

以及它的外观when I changed the padding to a percent ......

已编辑添加网址：

您可以在http://nightowlsrock.com/3-col.html

查看该页面

Answer 1

编辑：忽略我之前说的话。

W3C page on padding说

  

百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

是的，未定义的行为就是你所看到的。通过将值设置为.8%，1%，1.2%等，我可以产生截然不同的结果。 所以答案似乎是你应该首先将UL设置为某个预定的宽度。

Answer 2

你试过CSS3 flexbox吗？它不需要任何百分比（只是比例，浏览器本身处理宽度）。它还可以确保事物总是在同一条线上（没有像浮子那样撞击）。

http://www.html5rocks.com/en/tutorials/flexbox/quick/

至于padding，我认为大多数浏览器都存在宽度小于1px的问题，所以如果你想要“像素完美”，你可能不得不使用固定像素宽度和媒体查询来实现这一点。但我发现你通常可以用flexbox“足够接近”。