0

当我向页脚添加更多链接时，布局会扩展，并且每列的列表集会错位。

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

列维 | 使用列维 | 合法的

下图我的列标题未对齐！:(。我将如何正确对齐它们，以便当我向列表中添加更多内容时，每列中内容的对齐方式保持不变。

在此处输入图像描述

这是我希望我的页脚看起来如何的示例。

在此处输入图像描述

这是我现在的jsfiddle

这是我的 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>
4

1 回答 1

0

使用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;
}
于 2017-07-29T08:04:17.083 回答