html - 全宽栏部分填充纯色 CSS

Question

尝试创建一个横跨屏幕页脚的栏，其中 80% 填充纯白色，20% 透明，其中 2 个社交媒体图标将出现。

但是，我试图在 100% 处创建一个条形，然后在其中以 80% 和 20% 处放置两个元素的尝试连续失败。这两个元素是 floated:left 并且 white-space 被设置为 nowrap。

我尝试做 display:inline-block;但这最终将栏中的一个元素向下推了大约 10 像素。

任何人都知道如何实现这一点，以便在页面缩小到一定大小之前它会保持恒定大小，然后它最终换行？目前，它保持原样的唯一方法是当浏览器的宽度为 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>

Answer 1

使用display:inline-block。当 inline-block 元素在彼此之间创建空间时，您所指的分离就会发生。您可以通过对元素应用 -4px 的 margin-right 来解决此问题。

参见 fiddle :http://jsfiddle.net/Ln6vryjL/