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>