全寬度條部分填充純色CSS

試圖創建一個橫跨80％填滿純白色的屏幕的頁腳，以及20％透明的2個社交媒體圖標要去的欄。全寬度條部分填充純色CSS

但是，我嘗試在100％的條件下創建一個條，然後將80％和20％的兩個元素連續失敗。這兩個元素是浮動的：左和空白設置爲nowrap。

我試圖做顯示：inline-block;但最終推動了大約10px下的一個元素。

任何人都有任何想法如何實現這一目標，使它保持恆定的大小，直到頁面縮小到一定的大小，然後它最終包裝？目前唯一的方式就是保持瀏覽器寬度爲1,100像素寬。如果你走在其下方的社交媒體圖標之一獲取屏幕的右側下被埋（這......不應該發生的。但它是）

footer .logo-container .logo { 
 
     float: right; 
 
    } 
 
    footer .contact-container .white-bar { 
 
     background: #fff; 
 
    } 
 
    footer div.contact-info { 
 
     float: left; 
 
     width: 85%; 
 
    } 
 
    footer div.social-media { 
 
     white-space: nowrap; 
 
    } 
 
    footer div.social-media ul { 
 
     list-style-type: none; 
 
    } 
 
    footer div.social-media ul li { 
 
     display: inline-block; 
 
     margin-left: 15px; 
 
    }

<footer> 
 
    <div class="logo-container"> 
 
    <div class="logo"> 
 
     <img src="http://placehold.it/250x250" /> 
 
    </div> 
 
    <div class="clear"></div> 
 
    </div> 
 
    <div class="contact-container"> 
 
    <div class="contact-info white-bar"> 
 
     Phone Here | Address Here 
 
    </div> 
 
    <div class="social-media"> 
 
     <ul> 
 
     <li> 
 
      <img src="http://placehold.it/68x40" /> 
 
     </li> 
 
     <li> 
 
      <img src="http://placehold.it/71x40" /> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</footer>

來源

2015-08-14 Sparatan117

我們不能修復你的代碼，如果你不把它展現給我們的... – csmckelvey

德勤。編輯添加代碼。 – Sparatan117

使用display:inline-block。你指的分離發生在inline-block元素彼此之間創造空間。您可以通過將margin-right的-4px應用於元素來解決此問題。

見小提琴：http://jsfiddle.net/Ln6vryjL/

來源

2015-08-15 00:10:29 Tom

全寬度條部分填充純色CSS

回答

相關問題