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从列表中删除的要点，然后设置display:inline-block在li元素，还内的CSS文件。

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