html - CSS - 左右对齐在同一行

Question

下面是一些示例代码，其中所有链接都是右对齐的。我想更改 CSS，使“左”链接左对齐，其他链接右对齐，但它们都在同一行上。我该怎么做？

提前致谢

约翰

HTML:

<div class="mainlinks">
    <a href="left.php" class="links">Left</a>
    <a href="right1.php" class="links">Right1</a>
    <a href="right2.php" class="links">Right2</a>
</div>

CSS:

.mainlinks
    {
    text-align:right;
    margin-top:3px;
    margin-right:10px;
    margin-bottom:0px;
    padding:0px;
    }

 a.links:link {
    color: #FF0000; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-top:300px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

Answer 1

这是一篇旧文章，但它在 google 上的排名很高，因此仍然具有相关性。

我用了另一种方法在同一条线上左右对齐，没有使用任何丑陋的 float 。它使用类似表格的显示:

HTML:

    <footer>
      <nav>links (to the left)</nav>
      <p>copyright (to the right)</p>
    </footer>

CSS:

    footer
    {
      display: table;
      width: 100%;
    }
    footer nav
    {
      display: table-cell;
      text-align: left;
    }
    footer p
    {
      display: table-cell;
      text-align: right;
    }

我发现这样更干净。

希望这对某人有帮助!