HTML + CSS：不使用表格的页脚导航元素之间的相等距离

Question

  

可能重复：
  Fluid width with equally spaced DIVs

我试图将页脚元素作为文本。我试图在文本元素之间保持相等的距离。

<nav>
  <ul>
    <li><a>Item Reg</a></li>
    <li><a>Item Sm</a></li>
    <li><a>Item Very Long</a></li>
    <li><a>Item Reg</a></li>
  </ul>
</nav>

这是一张图片，解释了我想要实现的场景。左右元素总是分别左右对齐。

我怎么能用css和html做到这一点。注意：允许使用CSS3。

Answer 1

您可以为每个<li>使用左边的填充：

    li{
position:relative;
float:left;
padding-left:20px;}

Answer 2

一种方法是使用百分点作为宽度。

ul {
  width: 100%;
}
ul li {
  display: table-cell;
  width: 25%;
  text-align: center;
}

Answer 3

你可以用这种方式实现它

<div class="footer">

    <div style="width:200px; float:left;">

        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="width:200px; float:left;">

        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="width:200px; float:left;">
        <ul style="list-style:none">
            <li>1</li>
            <li>2</li>
        </ul>

    </div>

    <div style="clear:both"></div>

</div>

Answer 4

假设你有一定数量的元素，只需使用：

ul{
    padding:0 20px 0 20px;
    width:100%;
}

li{
    display:inline;
    float:left;
    width:25%;
}

<ul>
    <li>One</li>
    <li>Two</li>
</ul>