如何在頁腳中製作水平內嵌塊？

Question

如何並排排列四個塊列表？我想要一個類似於Stack Overflow的頁腳。我嘗試使用nav，dl中的內聯元素，甚至爲每個塊創建了一個div，但它不起作用。

任何幫助，將不勝感激。

#footer-wrapper { 
 
    margin-top: 125px; 
 
    text-align: center; 
 
} 
 

 
#inline { 
 
    display: inline-block; 
 
}

 
<footer id="footer-wrapper"> 
 
    <nav id="inline"> 
 

 
    <dl id="product-block"> 
 
     <dt>Products</dt> 
 
     <dd> 
 
     <ul> 
 
      <li><a href="___">Referrals</a></li> 
 
      <li><a href="___">Suggestions</a></li> 
 
     </ul> 
 
     </dd> 
 
    </dl> 
 

 
     <dt>Jobs</dt> 
 
     <dd> 
 
     <ul> 
 
      <li><a href="___">Positions</a></li> 
 
      <li><a href="___">Development</a></li> 
 
     </ul> 
 
     </dd> 
 
    </dl> 
 

 
    <dl id="about-block"> 
 
     <dt>About</dt> 
 
     <dd> 
 
     <ul> 
 
      <li><a href="___">Mission</a></li> 
 
      <li><a href="___">Meet the Team</a></li> 
 
     </ul> 
 
     </dd> 
 
    </dl> 
 

 
    <dl id="contact-block"> 
 
     <dt>Contact Us</dt> 
 
     <dd> 
 
     <ul> 
 
      <li><a href="___">Number</a></li> 
 
      <li><a href="___">Email</a></li> 
 
      <li><a href="___">Location</a></li> 
 
     </ul> 
 
     </dd> 
 
    </dl> 
 

 
    </nav> 
 
</footer>

Answer 1

使用下。 flex將項目保留在相同的基線中，對每個項目使用inline-block，以便它們不佔用整行，margin-left爲dd和ul刪除默認的40px margin-left。爲ul設置填充爲0，並將margin設置爲20px，這樣可以更好地對齊。

#inline { 
    display: flex; 
} 

dl { 
    display: inline-block; 
} 

dd { 
    margin-left: 0; 
} 

ul { 
    margin: 0 20px; 
    padding: 0; 
} 

<footer id="footer-wrapper"> 
    <nav id="inline"> 
    <dl id="product-block"> 
     <dt>Products</dt> 
     <dd> 
     <ul> 
      <li><a href="___">Referrals</a></li> 
      <li><a href="___">Suggestions</a></li> 
     </ul> 
     </dd> 
    </dl> 
    <dl> 
     <dt>Jobs</dt> 
     <dd> 
     <ul> 
      <li><a href="___">Positions</a></li> 
      <li><a href="___">Development</a></li> 
     </ul> 
     </dd> 
    </dl> 

    <dl id="about-block"> 
     <dt>About</dt> 
     <dd> 
     <ul> 
      <li><a href="___">Mission</a></li> 
      <li><a href="___">Meet the Team</a></li> 
     </ul> 
     </dd> 
    </dl> 

    <dl id="contact-block"> 
     <dt>Contact Us</dt> 
     <dd> 
     <ul> 
      <li><a href="___">Number</a></li> 
      <li><a href="___">Email</a></li> 
      <li><a href="___">Location</a></li> 
     </ul> 
     </dd> 
    </dl> 

    </nav> 
</footer>