CSS - выравнивание влево и вправо на одной строке

Ниже приведен пример кода примера, который имеет все ссылки, оправданные. Я хотел бы изменить CSS так, чтобы ссылка "Left" была оставлена ​​в порядке, остальные были правильно обоснованы, но все они находятся на одной линии. Как это сделать?

Спасибо заранее,

Джон

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

Ответы

Ответ 1

Поплавок слева влево

.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: 300px от a.links:link, в противном случае левая будет 300px ниже справа.

Ответ 2

Это старое сообщение, но оно хорошо размещено на google, поэтому оно все еще актуально.

Я использовал другой способ выровнять как правую, так и левую на той же строке, не используя никакого уродливого поплавка. Он использует табличный дисплей:

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

Я считаю, что это намного чище.

Надеюсь, это поможет кому-то!

Ответ 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%;
}

Ответ 4

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

Ответ 5

вам нужно поместить его в отдельные блоки (div) или переопределить с помощью более конкретного CSS, применяемого к ссылке, как было предложено @skurpur

Я считаю, что вы должны добавить отображение: блокировать ссылку, чтобы разместить ее - например. можно разместить только элементы блока.

Ответ 6

Вы можете использовать display: flex; в контейнере с justify-content: space-between; и align-items: baseline;. Существует хороший sass mixin для flex, поддерживающий старый и новый синтаксис: https://github.com/mastastealth/sass-flex-mixin