CSS - 同一行上的左右对齐

时间:2009-06-30 09:52:54

标签: html css

下面是一些示例代码,其中所有链接都是右对齐的。我想更改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;
    }

6 个答案:

答案 0 :(得分:15)

这是一个老帖子,但它在谷歌排名很好所以它仍然相关。

我使用另一种方法在同一条线上左右对齐,而不使用任何丑陋的浮动。它使用了类似于表格的显示:

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;
    }

我觉得这样更干净。

希望这有助于某人!

答案 1 :(得分:10)

向左浮动

.left {float:left;}

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

但是你需要删除margin-top:距离a.links:link 300px,否则左边将比右边低300px。

答案 2 :(得分:3)

将每个人放在一个单独的div中。左边一个,右边一个。设置宽度。

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

CSS

.mainlinks .left {
    float:left;
    width: 49%;
}

.mainlinks .right {
    float:right;
    width: 49%;
}

答案 3 :(得分:1)

<style>
.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;
    }

.right { float: right }
.left { float: left }

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

答案 4 :(得分:0)

你需要把它放到单独的块(div)或覆盖更多特定的CSS应用于@skurpur提出的链接

我相信你必须将display:block添加到链接以定位它 - 例如只能定位块元素。

答案 5 :(得分:0)

您可以在display: flex;justify-content: space-between;的容器上使用align-items: baseline;。有一个很好的sass mixin for flex支持新旧语法:https://github.com/mastastealth/sass-flex-mixin