流畅的 2 列布局问题。悬垂在容器边缘的行内块元素

Question

我正在尝试在页脚中使用 2 列流体布局。页脚的右侧栏有一个内联元素列表——社交图标。在您开始重新调整浏览器的宽度之前，此方法效果很好。在某一时刻，社交图标开始悬垂在页脚的背景上。

这是视口为正常尺寸时的样子：

视口变小时出现问题：

我试图在这个 fiddle 中尽可能地简化它。请注意当重新调整视口大小时这些链接如何开始悬垂。

我希望页脚的背景完全包含这些链接

http://jsfiddle.net/ambidexterous/xwugnyh1/1/

css:

.l-columns {
  vertical-align: top;
}
.l-columns:before,
.l-columns:after {
  content: " ";
  display: table;
}
.l-columns:after {
  clear: both;
}
.l-columns {
  *zoom: 1;
}

.l-columns-85 {
  width: 85%;
}

.l-columns-15 {
  width: 15%;
}
.l-columns-left {
  float: left;
}
.l-columns-right {
  float: right;
}

footer {
    background-color: #002A54;
}

.l-horizontal-inline-list li{
    list-style-type: none;
    display: inline-block;
}

.l-horizontal-inline-list li a{
    margin: 5px;
}

html:

    <header>
    <h1>HEADER</h1>
    <header>
        <article>
            luptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum qui
        </article>
<footer>
    <div class="l-columns">
        <div class="l-columns-85 l-columns-left">
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
            <div class="l-columns-15 l-columns-right">
                <ul class="social l-horizontal-inline-list">
                    <li>
                       <a href="#">alfa</a>
                    </li>
                    <li>
                        <a href="#">beta</a>
                    </li>
                    <li>
                        <a href="#">gamma</a>
                    </li>
                    <li>
                        <a href="#">charlie</a>
                    </li>
                </ul>
            </div>    
    </div>
</footer>

Answer 1

有意思，没见过:before和:after用来插入一个table伪元素

将 display: table-cell; 添加到这些类:

.l-columns-85 {
  width: 85%;
  display: table-cell;
}

.l-columns-15 {
  width: 15%;
  display: table-cell;
}

然后您可以删除此 CSS:

.l-columns-left {
  float: left;
}

.l-columns-right {
  float: right;
}

Working Fiddle

Answer 2

发生这种情况的原因是 ul li 列表总是有左边距，即使您设置 list-style-type: none;

您可以重新设置样式，添加

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {

    background-position: 0px center; 

}

这里是 fiddle

流畅的 2 列布局问题。悬垂在容器边缘的行内块元素

Fluid 2-col layout issues. inline-block elements overhanging the edge of the container

css

background-color