流體2-col佈局問題。內嵌塊元素懸垂在容器邊緣

Question

我正在嘗試在頁腳中使用2列流體佈局。 頁腳中的右側列有內聯博克元素列表 - 社交圖標。直到你開始重新調整瀏覽器的寬度，這個效果很好。在某一時刻，社交圖標開始超出了頁腳的背景。

這是它的外觀時，視口是正常大小的：

問題顯示了當視口變得更小：

我試圖簡化此下來，在這個小提琴中儘可能多。注意當視口重新調整大小時，這些鏈接如何開始懸空。

我想頁腳這樣的背景下，以包含這些鏈接完全

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

出現這種情況的原因是，UL李名單總是有即使您設置了左邊距list-style-type: none;

你可以restyle這將

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

ul li { 

    background-position: 0px center; 

} 

這裏有一個fiddle

Answer 2

有趣，我從來沒有見過:before和:after用來插入表僞元素。

添加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