中心对齐内联块div与另一个div左侧浮动

Question

我正在构建一个页脚，我有三个部分：一个徽标向左浮动，一个nav ul居中，一组社交图标向右浮动。每当我向左浮动徽标时，我的nav ul中的lis被推向右边是没有明显原因的。 ul本身在页面上居中，并且lis上没有填充/边距，因此没有理由将它们推过去。这是我的代码和一些屏幕截图。

HTML     

        <p class="copyright footerLogo">
        OUR COMPANY LOGO</p>

        <div class="footerNavbar">


          <ul>
            <li><a href="default.asp">Services</a></li>
            <li><a href="news.asp">Client Work</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">Hire Us</a></li>
          </ul>

        </div>

        <div class="socialIcons">
            <ul>
                <li>
                    <a href="http://facebook.com">
                        <i class="fa fa-facebook-official fa-2x"></i>
                    </a>
                </li>
                <li>
                    <a href="http://twitter.com">
                        <i class="fa fa-twitter-square fa-2x"></i>
                    </a>
                </li>
                <li>
                    <a href="http://linkedin.com">
                        <i class="fa fa-linkedin-square fa-2x"></i>
                    </a>
                </li>
            </ul>
        </div>
</footer>

CSS

footer {
  text-align: center;
  height: 5em;
  background: transparent; }

footer .footerLogo {
  float: left;
  padding-left: 2em;
  padding-top: 1em; }

footer .footerNavbar {
  width: 60%;
  margin: 0 auto; }

footer .footerNavbar ul {
  padding: 0; }

footer .footerNavbar ul li {
  text-align: center;
  display: inline-block; }

footer .socialIcons {
  float: right;
  padding-right: 2em; }

footer .socialIcons ul li {
  display: inline-block; }

ul居中：

当左边的浮动关闭时，lis居中：

Answer 1

创建一个包含所有3个元素的父div。

左边的元素：

position:absolute;
left:0;

右边的元素：

position:absolute;
right:0;

相对于父div：

#parent {
position:relative;
}

Answer 2

这可能是您的一个开始。这是你想要的吗？

我清理了代码，为每个页脚孩子添加了一些临时添加的背景颜色（这样做更容易看到错误）

footer {
  height: 5em;
}

footer .footerLogo {
  float: left;
  width: 20%;
  background-color: red;
}

footer .footerNavbar {
  float: left;
  width: 60%;
  text-align: center;
  background-color: lime;
}

footer .footerNavbar ul {
  padding: 0;
}

footer .footerNavbar ul li {
  text-align: center;
  display: inline-block; }

footer .socialIcons {
  float: left;
  width: 20%;
  text-align: center;
  background-color: yellow;
}

footer .socialIcons ul li {
  display: inline-block;
}

<footer>
       <div class="copyright footerLogo">
        OUR COMPANY LOGO</div>

        <div class="footerNavbar">


          <ul>
            <li><a href="default.asp">Services</a></li>
            <li><a href="news.asp">Client Work</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">Hire Us</a></li>
          </ul>

        </div>

        <div class="socialIcons">
            <ul>
                <li>
                    <a href="http://facebook.com">
                        <i class="fa fa-facebook-official fa-2x">1</i>
                    </a>
                </li>
                <li>
                    <a href="http://twitter.com">
                        <i class="fa fa-twitter-square fa-2x">2</i>
                    </a>
                </li>
                <li>
                    <a href="http://linkedin.com">
                        <i class="fa fa-linkedin-square fa-2x">3</i>
                    </a>
                </li>
            </ul>
        </div>
</footer>

Answer 3

1. 请添加一个指向jsfiddle的链接，以便更方便地为您提供帮助。

2. 我认为您需要使用css clear property