中心對齊內嵌塊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浮動左邊

回答

相關問題