全宽度条部分填充纯色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

回答

相关问题