Htmlフッタのレイアウト（同じ行のulとli）

Question

質問：同じ行にulとliのようにする方法。誰もこの問題で私を助けることができます。どうもありがとう。

Product product product product 
Drink Drink Drink Drink 
Food Food Food Food 

CSS：

#footer{ 
     display:inline; 
    } 

    #footer .footer_container{ 
     display:inline; 
     border:1px solid red; 
    } 

はHTML：

<div id="footer"> 

     <div class="footer_container"> 

      <section> 
        <h1>Product</h1> 
        <ul> 
         <li>Product</li> 
         <li>Product</li> 
         <li>Product</li> 
         <a href="google.com"><li>Product</li></a> 
        </ul> 
       </section> 

       <section> 
        <h1>Drinks</h1> 
        <ul> 
         <li>Drinks</li> 
         <li>Drinks</li> 
         <li>Drinks</li> 
         <a href="google.com"><li>Product</li></a> 
        </ul> 
       </section> 

       <section> 
        <h1>Food</h1> 
        <ul> 
         <li>Food</li> 
         <li>Food</li> 
         <li>Food</li> 
         <a href="google.com"><li>Product</li></a> 
        </ul> 
       </section> 
     <div> 
    </div> 

Answer 1

あなたのスタイルに

ul, li{ 
    display:inline-block; 
} 

を追加します。

Answer 2

CSSでlist-styleを使用してリストから箇条書きを削除し、li要素のCSSファイル内にdisplay:inline-blockを設定するだけです。

#footer{ 
 
     display:inline; 
 
    } 
 

 
    #footer .footer_container{ 
 
     display:inline; 
 
     border:1px solid red; 
 
    } 
 

 
    ul { 
 
     list-style: none; 
 
     } 
 

 
    li { 
 
     display: inline-block; 
 
     }

<div id="footer"> 
 

 
     <div class="footer_container"> 
 

 
      <section> 
 
        <h1>Product</h1> 
 
        <ul> 
 
         <li>Product</li> 
 
         <li>Product</li> 
 
         <li>Product</li> 
 
         <a href="google.com"><li>Product</li></a> 
 
        </ul> 
 
       </section> 
 

 
       <section> 
 
        <h1>Drinks</h1> 
 
        <ul> 
 
         <li>Drinks</li> 
 
         <li>Drinks</li> 
 
         <li>Drinks</li> 
 
         <a href="google.com"><li>Product</li></a> 
 
        </ul> 
 
       </section> 
 

 
       <section> 
 
        <h1>Food</h1> 
 
        <ul> 
 
         <li>Food</li> 
 
         <li>Food</li> 
 
         <li>Food</li> 
 
         <a href="google.com"><li>Product</li></a> 
 
        </ul> 
 
       </section> 
 
     <div> 
 
    </div>