Full Width Bar частично заполнен сплошным цветом CSS

Question

Пытается создать панель, которая пересекает нижний колонтитул экрана, на 80% заполненный сплошным белым, и 20% прозрачный, где будут отображаться 2 значка социальных сетей.

Однако мои попытки создания бара на 100%, а затем наложение на него двух элементов в 80% и 20% непрерывно прерываются. Эти два элемента плавают: слева и белое пространство установлено в nowrap.

Я сделал попытку сделать отображение: встроенный блок; но это привело к нажатию одного из элементов в баре около 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 создают пространство между собой. Вы можете исправить эту проблему, применив к элементам margin-right из -4px.

См Fiddle: http://jsfiddle.net/Ln6vryjL/