フッターに水平インラインブロックを作成するにはどうすればよいですか？

Question

4つのブロックリストを並べるにはどうしたらいいですか？ Stack Overflowに似たフッターが必要です。私はnav、dlのinline要素を使って試してみましたが、各ブロックの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アイテムを同じベースラインに保つには、アイテムごとにインライン・ブロックを使用して行全体を取らないようにし、余白を残してデフォルトの40ピクセルの余白を削除します.ddとulのために残ります。 ulの場合は0に、左側の場合は20pxまでの余白を0に設定してください。

#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>