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中的li从列表中删除项目符号点，然后在#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>，同样在CSS文件中。

＆＃13;

angular.module('app.nameDisplay', [uiRouter])
.component('nameDisplay', {
    controller: function(){
        this.name = "Keir Beckett";
        this.age = 24;
        this.changeInfo = function(){
            this.name = "Golash Bista";
            this.age = 66;
        }
    },
    template: "" +
        "<div>" +
            "<h2>{{$ctrl.name}}</h2>" +
            "<h4>{{$ctrl.age}}</h4>" +
            "<button ng-click='$ctrl.changeInfo()'>Change Info</button>" +
        "</div>"
}).config(($stateProvider, $urlRouterProvider) => {
    $stateProvider.state('nameDisplay', {
        url: '/nameDisplay',
        component: 'nameDisplay'
    })
    .state("otherDisplay", {
        url: '/otherDisplay',
        template: '<h1>Other Display</h1>'
    });
    $urlRouterProvider.otherwise('/');
})
.name;

＆＃13;

{{1}}

＆＃13;

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

2 个答案: