中心对齐内嵌块div与另一个div浮动左边

我正在构建页脚，我有3个部分：左侧浮动的徽标，左侧浮动的徽标和右侧浮动的一组社交图标。无论何时我将标志浮起，我的导航栏中的标志都被推向右侧，原因不明。 ul本身位于页面的中心，并且没有填充/页边空白，所以没有理由推迟它们。这是我的代码和一些屏幕截图。中心对齐内嵌块div与另一个div浮动左边

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居中：

ul is centered, lis are centered

当浮子左关闭时，LIS居中：

when float left is off, lis are centered

来源

2016-01-21 Kathryn Crawford

我把它编辑成显示已编译代码 –

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

我清理代码一点，临时增加的背景颜色，每个页脚的孩子（这样更容易看到这样做时，什么是错）

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>

来源

2016-01-21 20:36:32 LGSon

将导航栏左侧浮动？绝对是我从未想过的事情，但正是我想要的。谢谢！ –

制作一个包含所有3个元素的父div。左侧

元素：右边

position:absolute; 
left:0;

元素：

position:absolute; 
right:0;

相对于父DIV：

#parent { 
position:relative; 
}

来源

2016-01-21 19:47:23 eclipsis

-1

请添加一个链接到的jsfiddle所以帮助你更容易。
我认为你需要使用CSS clear property

来源

2016-01-21 19:53:23

中心对齐内嵌块div与另一个div浮动左边

回答

相关问题