Html 页脚布局（ul 和 li 在同一行）答案

【问题标题】：Html footer layout (ul and li in the same line)Html 页脚布局（ul 和 li 在同一行）
【发布时间】：2016-12-18 06:48:08
【问题描述】：

问题：如何让它像 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>

【问题讨论】：

标签： html layout line footer

【解决方案1】：

添加

ul, li{
    display:inline-block;
}

你的风格。

【讨论】：

【解决方案2】：

您需要做的就是在 CSS 中使用 list-style 从列表中删除项目符号，然后在 CSS 文件中的 li 元素上设置 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>

【讨论】：