正确对齐我的页脚的内容

Question

当我向页脚添加更多链接时，布局会展开，并且每列的列表会变得不对齐。

我想确保为每列设置的每个列表在同一行中水平对齐。例如每列的标题在同一行

levi | 使用levi | 合法

下面的图像有我的列标题错位！ :(。我怎么会对准他们正确，这样，当我更添加到列表中的每一列内容的对齐方式保持不变。

这是我多么希望我的页脚看看
的一个实例。

Here is my jsfiddle of how it is now

这是我的HTML：

<md-layout id = "container" style = "max-height:40px;"> 

     <md-layout md-column md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33"> 

        <md-list> 

        <md-list-item class = "md-display-2">levi</md-list-item> 
          <router-link :to = "{ name: 'About' }"><md-row>About</md-row></router-link> 
          <md-row >Customers</md-row > 
          <md-row >Contact Us</md-row > 
         <md-row >Support</md-row > 
         <md-row >Support</md-row > 
         <md-row >Support</md-row > 
         <md-row >Support</md-row > 
         <md-row >Support</md-row > 
         <md-row >Support</md-row > 
     <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       <md-row >Support</md-row > 
       </md-list> 




        </md-layout> 


<md-layout md-column md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33"> 


       <md-row class = "md-display-2" >Using levi</md-row > 
        <md-row >Business</md-row > 
        <md-row > <router-link class = "" :to = "{ name: 'Product' }"> 
         Features 
        </router-link> </md-row> 
         <md-row >Pricing</md-row > 
         <md-row >Pricing</md-row > 

        </md-layout> 

        <md-layout md-column md-gutter md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33"> 

        <md-column class = "md-display-2">legal</md-column> 
        <md-column></md-column> 
         <md-column></md-column> 

</md-layout> 

Answer 1

使用flexbox是您的问题的最佳解决方案。你可以简单地使用它。 codepen中的示例显示了如何制作这样的页脚。在这个例子中，我使用了flexbox，因为它是最有前途的显示布局方法。在flexbox中，大多数现代浏览器都支持许多规则。利用它，只需做任何你想要的。所有最优秀的

HTML代码： -

<div class='container'> 
    <ul class="list"> 
    <li class="list-heading">One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    <li>six</li> 
    <li>Seven</li> 
    <li>Eight</li> 
    </ul> 
    <ul class="list"> 
    <li class="list-heading">One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    </ul> 
    <ul class="list"> 
    <li class="list-heading">One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    <li>six</li> 
    <li>Seven</li> 
    <li>Eight</li> 
    </ul> 
</div> 

CSS： -

.container { 
    display: flex; 
    max-width: 600px; 
    border: 1px solid #ddd; 
} 
.list { 
    flex-grow: 1; 
    padding-left: 20px; 
    list-style: none; 
    border-left: 1px solid #ddd; 
} 
.list-heading { 
    font-size: 18px; 
    font-weight: bold; 
}