均匀对齐水平列表（并响应）

Question

我知道有多种方法可以证明水平列表的合理性。但不像我的screendesign： 你在屏幕设计的顶部和下方看到了我的结果。任何想法如何改善项目之间的空间，使它们更均匀？ （第2和第3项是长的）

这是我的代码：

.navi {
    text-align: center;
    display: table;
    width: 100%;
    ul {
        display:table-row;
    }
    li {
        display:table-cell;
        a {
            display: block;
            border: 1px solid #000;
        }
    }
}

Answer 1

虽然这是solved by Flexbox，但您仍然可以使用CSS表 - 为了浏览器支持 - 来实现所需的结果：

＆＃13;

＆＃13;

.navi {
  text-align: center;
  display: table;
  width: 100%;
}
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; }
.navi li a { display: block; border: 1px solid #000; }

＆＃13;

<div class="navi">
  <ul>
    <li><a href="">Link No.1</a></li>
    <li><a href="">Link No.2 has much text</a></li>
    <li><a href="">Link No.3 has much more text</a></li>
    <li><a href="">Link No.4</a></li>
    <li><a href="">Link No.5</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

为了将文本保留在一行中，您可以将white-space: nowrap提供给表格单元格，如下所示：

＆＃13;

＆＃13;

.navi { text-align: center; display: table; width: 100%; }
.navi ul { display: table-row; }
.navi li { display: table-cell; width: 20%; white-space: nowrap; }
.navi li a { display: block; border: 1px solid #000; }

＆＃13;

<div class="navi">
  <ul>
    <li><a href="">Link No.1</a></li>
    <li><a href="">Link No.2 has much text</a></li>
    <li><a href="">Link No.3 has much more text</a></li>
    <li><a href="">Link No.4</a></li>
    <li><a href="">Link No.5</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我喜欢使用table，table-row和table-cell方法。在我的例子中，我有2个需要水平对齐的链接，但我想在它们之间留出一些空间。我在链接之间添加了一个空项来创建一个spacer。然后添加了css以仅设置奇数单元格的样式。

<div class="aff">
<ul class="buttons">
<li><a href="http://www.link1.com">Link1</a></li>
<li>&nbsp;</li>
<li><a href="http://www.link2.com">Link 2</a></li>
</ul>
</div>

.aff {display:table; text-align:center; width:100%; box-sizing:border-box;}
.aff ul.buttons {display:table-row;list-style-type:none; margin:0; padding:0;}
.aff ul.buttons li:nth-child(odd) {display:table-cell; width:47%; background:#acacac; padding:10px; border-radius:.44em}
.aff ul.buttons li a {display:block; line-height:45px; font-size:1.2em; text-decoration:none; font-weight:bold;}
.aff ul.buttons li a:hover {text-decoration:underline;}